javascript - 如果元素不可见，是不是会在元素上触发点击事件？

Posted 2023-02-21

【中文标题】javascript - 如果元素不可见，是不是会在元素上触发点击事件？

【英文标题】：javascript - does a click event fire on an element if it's not visible?javascript - 如果元素不可见，是否会在元素上触发点击事件？

【发布时间】：2013-03-20 11:02:20

【问题描述】：

如果您更改元素visibility: hidden 的可见性，如果用户点击它，点击事件是否仍会触发？

我想“隐藏”一个元素（即<span>）并禁止点击事件触发，但保留在文档正常流程中的位置。所以display: none; 将不起作用，因为它会从正常流程中删除文档，但想知道我在不实际处理点击事件和使用 preventDefault() 的情况下通过 CSS 的其他选项是什么？

【问题讨论】：

你试过了吗？发生了什么？

【参考方案1】：

不，visibility:hidden 不会触发，这里有证据：)

jsFiddle

JS

$('div').click(function() 
    alert('');
);

CSS

div 
    background-color:red;
    width:100px;
    height:100px;


.hidden 
    visibility:hidden

【讨论】：

对不起，关于他的问题，我误读了你的答案......在那里编织死亡时刻。我把它读作“没有可见性隐藏，不会禁用点击事件”。

这就是我如何判断今天是星期五... +1 击败我，并澄清一下

在所有主流浏览器（ff、chrome、safari、opera、IE9、8、7）中都是一致的

【参考方案2】：

是的可见性隐藏禁用点击事件。

若要使用 web-kit 浏览器在此页面上右击可点击元素进行测试，请应用 visibility: hidden 样式，您将无法点击它。