StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODisabling Javascript event fall-throughs when dealing with z-ordered HTML elements
text
Body
copied!<p>I have a silly (and hopefully easily fixed) problem, which I will now attempt to describe. </p> <p>The scenario-> I am trying to create a context menu using HTML / CSS / JS. Just a DIV with a high z-order that appears where a user right-clicks. Simple, and that portion works. The portion which does not is my attempt to make the menu disappear if the user clicks somewhere where a context menu is not supported; I am attempting to achieve this end with a general function in the BODY tag that fires onclick. Since the BODY tag is given a z-order of -1, and any other tags which might trigger the context menu to appear are given a higher z-order value, my hope was that if I right-clicked an element with a z-order of, say, 3, then it would fire the showMenu() function; instead, it appears that it does this, as well as passes the event to the underlying BODY tag, which causes the menu to become hidden again. </p> <p>As you might imagine, it is incredibly frustrating. Does anyone know how to make prevent events from being passed down? (The INPUT button is what you may want to look at, the A anchor is something similar, but not coded to work just yet). </p> <p>Here's the HTML code:</p> <p><a href="http://pastebin.com/YeTxdHYq" rel="nofollow">http://pastebin.com/YeTxdHYq</a> </p> <p>And here's my CSS file:</p> <p><a href="http://pastebin.com/5hNjF99p" rel="nofollow">http://pastebin.com/5hNjF99p</a> </p> <p>This appears to be a problem with IE, Firefox, and Chrome. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload