javascript - Triggering events for the DOM elements with lower Z-index value - Stack Overflow

admin管理员组

文章数量:1431450

Can anyone help me out , on how to trigger events for DOM elements having lower z-index value .

//HTML code

...
<div>
//Hihger Z-index element
<div id="element1" style="position: absolute;Z-index:5; height: 500px; width: 900px;"></div>    

//Lower Z-index element
<div id="element2" style="position: absolute;Z-index:2; height: 500px; width: 900px;"></div>  
</div>  

//Binding Events

$("#element2").on("mouseenter",function() {alert("Problem with lower z-index")});

If I set a higher Z-index value for the #element2 the event is triggered.

Can anyone help me out , on how to trigger events for DOM elements having lower z-index value .

//HTML code

...
<div>
//Hihger Z-index element
<div id="element1" style="position: absolute;Z-index:5; height: 500px; width: 900px;"></div>    

//Lower Z-index element
<div id="element2" style="position: absolute;Z-index:2; height: 500px; width: 900px;"></div>  
</div>  

//Binding Events

$("#element2").on("mouseenter",function() {alert("Problem with lower z-index")});

If I set a higher Z-index value for the #element2 the event is triggered.

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 21, 2015 at 9:54 BharathBharath 10111 gold badge44 silver badges1111 bronze badges 3

• add pointer-events:none to your css code #element1{ pointer-events:none; } read more here developer.mozilla/en-US/docs/Web/CSS/pointer-events – Nishit Maheta Commented Mar 21, 2015 at 9:56
• You cannot. element1 is positioned over element2. So it catches all the events. If element1 was a child of element2 it would work since the event bubbles. How would you push a button if there is a glass panel in front of it? – Mouser Commented Mar 21, 2015 at 9:56
• Please find solution here. Similar answer responded here. stackoverflow./questions/4024479/… – maddy Commented Mar 21, 2015 at 10:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

add pointer-events:none to your css code #element1{ pointer-events:none; } read more here . check DEMO

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can bee the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

  <div>
       //Hihger Z-index element
        <div id="element1" style="position: absolute;Z-index:5; height: 500px; width: 900px;pointer-events:none;"></div>    

     //Lower Z-index element
     <div id="element2" style="position: absolute;Z-index:2; height: 500px; width: 900px;"></div>  
 </div>  

本文标签： javascriptTriggering events for the DOM elements with lower Zindex valueStack Overflow