javascript - Is it possible for the child of a div set to pointer-events: none to have pointer events? - Stack Overflow

admin管理员组

文章数量:1134579

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?

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?

• javascript
• html
• css

Share Improve this question Follow edited Mar 24, 2022 at 15:37 Kostas Minaidis 5,24233 gold badges1919 silver badges2929 bronze badges asked Aug 12, 2012 at 7:21 fancyfancy 51.3k6363 gold badges156156 silver badges230230 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 243

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/

On the child element's style, add

pointer-events: auto;

pointer-events: all didn't work for me, and apparently applies to SVG elements only.

My solution:

.mouse-false * {
  pointer-events: none;
}

<button class='mouse-false'>
 <i>e</i> test
</button>

As a possible solution in some cases you can set

height: 0;

to parent element and let child element to overflow.

UPD. I've received -6 downvotes so I assume that my idea is not clear enough. Let me demonstrate it in action: https://jsfiddle.net/lllukom/4tpuv2ns/

In this example there is a flash message, which shows below the header and centered horizontally. To allow for content behind .flash-messages to be interactive height: 0 is set.

There is one slight benefit in using height: 0 compared to pointer-events: none/all so that when you are inspecting an element in chrome developer tools and hover over the link – the link is inspected instead of .flash-messages container element.

本文标签：