Div 的子类是否可能设置为指针事件: 无指针事件?

设置为 pointer-events: none的 div 的子级是否可能有指针事件?

我需要保存另一个 div 的 div 来允许指针事件通过,但是 div 本身仍然保留事件。

这可能吗?

48175 次浏览

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.

As a possible solution in some cases you can set

height: 0;

to parent element and let child element to overflow

My solution:

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


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