Pass mouse events through absolutely

I'm attempting to capture mouse events on an element with another absolutely-positioned element on top of it.

Right now, events on the absolutely-positioned element hit it and bubble up to its parent, but I want it to be "transparent" to these mouse events and forward them on to whatever is behind it. How should I implement this?

---

pointer-events:none;

Is a css-property that makes events "pass through" the DOM-element to which it is applied and makes the event occur on the element "below".

See for details: https://developer.mozilla.org/en/css/pointer-events

It not supported up to IE 11; all other vendors support it since quite some time (global support was ~92% in 12/'16): http://caniuse.com/#feat=pointer-events (thanks to @Sidnicious for providing the link in the comments)

---

If all you need is mousedown, you may be able to make do with the document.elementFromPoint method, by:

removing the top layer on mousedown,

passing the x and y coordinates from the event to the document.elementFromPoint method to get the element underneath, and then

restoring the top layer.

---

Also nice to know...
Pointer-events can be disabled for a parent element (probably transparent div) and yet be enabled for child elements. This is helpful if you work with multiple overlapping div layers, where you want to be able click the child elements of any layer. For this all parenting divs get pointer-events: none and click-children get pointer-events reenabled by pointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

链接地址: http://www.djcxy.com/p/49168.html

上一篇: 检查元素上是否存在事件

下一篇: 绝对通过鼠标事件