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

admin管理员组

文章数量:1022834

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()?

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()?

• javascript
• css
• click
• visibility
• hidden

Share Improve this question Follow edited Mar 29, 2013 at 17:48 johntrepreneur asked Mar 29, 2013 at 17:35 johntrepreneurjohntrepreneur 4,70466 gold badges4141 silver badges5454 bronze badges 1

• Did you try it out? What happened? – epascarello Commented Mar 29, 2013 at 17:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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
}

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.

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()?

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()?

• javascript
• css
• click
• visibility
• hidden

Share Improve this question Follow edited Mar 29, 2013 at 17:48 johntrepreneur asked Mar 29, 2013 at 17:35 johntrepreneurjohntrepreneur 4,70466 gold badges4141 silver badges5454 bronze badges 1

• Did you try it out? What happened? – epascarello Commented Mar 29, 2013 at 17:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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
}

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.

本文标签： cssjavascriptdoes a click event fire on an element if it39s not visibleStack Overflow