88244

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

Question:

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

Answer1:

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

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

<strong>JS</strong>

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

<strong>CSS</strong>

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

Answer2:

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.

Recommend

  • 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