Menu
I have elements that are under an element with opacity:0.5 that I want to be able to click on. How can I click "through" the topmost element?
Here's an example that demonstrates my problem. Click on the boxes to toggle them on and off. You can edit it on jsbin to try out your solution.
Bonus points if you can have the boxes toggle on hover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #000; } .box {width: 50px; height: 50px; border: 1px solid white} .highlight {background-color: yellow;} </style> <script type="text/javascript"> var dthen = new Date(); $('<div id="past">').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px' ,'position': 'absolute' ,'width': '200px' ,'top': '0px' ,'background-color': 'grey' ,'opacity': '0.5' }) .appendTo("#container"); setInterval(function(){ dNow = new Date(); $('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px'); },10) $(".box").click(function(){ $(this).toggleClass("highlight"); }); </script> </head> <body> <div id="container"> <div class="box" style="position:absolute; top: 25px; left: 25px;"></div> <div class="box" style="position:absolute; top: 50px; left: 125px;"></div> <div class="box" style="position:absolute; top: 100px; left: 25px;"></div> <div class="box" style="position:absolute; top: 125px; left: 125px;"></div> <div class="box" style="position:absolute; top: 225px; left: 25px;"></div> <div class="box" style="position:absolute; top: 185px; left: 125px;"></div> </div> </body> </html> 
304
Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.
you can you use addEventListener("click", function(){blah blah blah}, true) which would pass the event to its children. in the child element, you can handle the event as you wish.
The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
OK, so there are 2 things I think I would do: (1) a CSS3 answer, that isn't yet widely adopted, and (2) a Javascript backup-plan for the rest. (not sure what to do about users without JS on older browsers that don't support the CSS part). Read on...
First: Use this CSS3 code to make the upper element 'invisible' to mouse-interaction:
pointer-events: none; This is not yet cross-browser compatible. It only works on SVG & HTML Elements in Gecko & Webkit browsers, but only on SVG elements in Opera, and not at all in IE.
Per the MDN:
The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.
Here's that documentation: https://developer.mozilla.org/en/css/pointer-events
Second: Use some javascript Feature Detection for those browsers that don't yet support this CSS. You'll have to roll your own, similar to Modernizr, since it doesn't test for this yet (to my knowledge). The idea is that you create an element, apply the pointer-events CSS to it, check for it, and if the browser supports the feature, you'll get the expected result, as opposed to something null or undefined; then destroy the element. Anyway, once you have feature detection, you can use jQuery or similar to attach a listener to the uppermost element and assign a click from it to click through to something else. Check out jQuery and it's use of the click() function for more info (not enough reputation to post the link, sry).
If I get time later, I might be able to work up a quick jsFiddle on it. I hope this helps.
104
If you topmost element is contained within the element below, you can let the event "bubble through". If it is not, you have to trigger the click manually. There is no way to fire the event handler just by clicking.
To fire the event manually, you could do this:
$("#topelement").click(function() { $("#elementbelow").click(); return false; }); EDIT (response to comments):
To enumerate all boxes, you can do this (off the top of my head. no testing, could not even be syntax-error free)
$("#topelement").click(function(e) { $(".box").each(function() { // check if clicked point (taken from event) is inside element var mouseX = e.pageX; var mouseY = e.pageY; var offset = $(this).offset; var width = $(this).width(); var height = $(this).height(); if (mouseX > offset.left && mouseX < offset.left+width && mouseY > offset.top && mouseY < offset.top+height) $(this).click(); // force click event }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
