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


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

<a href="http://jsfiddle.net/PFXC5/1/" rel="nofollow">jsFiddle</a>


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


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.


  • HtmlAnchor click() function in Htmlunit is not working
  • Problem with jquery ajax and google chrome
  • HTML5 embed tag - event attributes not firing (onended, onpause etc)
  • Preventing ctrl+z in browser
  • How can I allow tags through rails 4 sanitize?
  • Unload image of UIImageView thats offscreen
  • Removing event listeners on automatically created multiple elements
  • How do you SELECT several columns with one distinct column
  • how to read a file in prolog?
  • Specifying virtual keyboard type for EditText in XML
  • What is this strange character in chrome's resource css viewer?
  • How to repeat sections of a SQL query across UNIONs? (DRY in SQL)
  • Streaming screenshots over WebRTC as a video stream from iOS
  • Runtime.exec() gives Error: Could not find or load main class
  • Creating PDF from TIFF image using iText
  • User messaging system
  • quiver not drawing arrows just lots of blue, matlab
  • how to save the state in userdefaults of accessory checkmark-iphone
  • How to handle images sent by a mobile device?
  • Blackberry - Custom EditField Cursor
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Body moving without any force applied? (Box2d)
  • Recording logins for password protected directories
  • Pass value from viewmodel to script in zk
  • Deleting and Updating values from a cusrsor adapter
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Modifying destination and filename of gulp-svg-sprite
  • javascript inside java/jsp code
  • WinForms: two way TextBox problem
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Change an a tag attribute in JavaScript based on screen width
  • How to disable jQuery.jplayer autoplay?
  • Python: how to group similar lists together in a list of lists?
  • Benchmarking RAM performance - UWP and C#
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Understanding cpu registers
  • Android Google Maps API OnLocationChanged only called once