Menu
Is it possible for the child of a div set to pointer-events: none to have pointer events?
I need the div that holds another div to allow pointer events to pass through, but for the div itself to still have events.
Is this possible?
205
In addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
Default Pointer Events on an element corresponds to the CSS pointer events property. It controls whether or not an element will "pass through" clicks to elements that are underneath it (that is, elements that have a smaller z-index). For example, in the following canvas an image sits over a button element.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
CSS pointer-events (for HTML) is Fully Supported on Safari 12, which means that any user who'd be accessing your page through Safari 12 can see it perfectly.
Yes, it's possible, and you basically just described how. Disable it for the parent and enable it for the child.
pointer-events is supported in almost every browser, including IE11
Please note that pointer-events: all is for SVG only.
For HTML, only auto and none are supported values.
.parent { pointer-events: none; } .child { pointer-events: auto; }<div class="parent"> <a href="#">Parent</a> <div class="child"> <a href="#">Child</a> </div> </div>Demo: http://jsfiddle.net/4gQkT/
92
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
