javascript - does a click event fire on an element if it's not visible?

问题

If you change the visibility of an element visibility: hidden, will a click event still fire if the user clicks it?

I want to "hide" an element (i.e. <span>) and disable the click event from firing, but retain is position in the normal flow of the document. So display: none; won't work since it removes the document from the normal flow, but was wondering what are my other options via CSS without actually handling the click event and using preventDefault()?

回答1:

No it won't fire when visibility:hidden, here is proof :)

jsFiddle

JS

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

CSS

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

.hidden {
    visibility:hidden
}

回答2:

Yes visibility hidden disables the click event.

To test just right click a clickable element on this page with a web-kit browser, apply a style of visibility: hidden and you will be unable to click it.

来源：https://stackoverflow.com/questions/15708418/javascript-does-a-click-event-fire-on-an-element-if-its-not-visible