pointer-events: none在可满足内容的元素上不起作用

Question

我有一个父元素div，其中pointer-events是none。在这个div里面有一个span，其中它的contenteditable属性是true，但我仍然可以在Chrome上编辑span元素的内容，而pointer-events为父div是无。

但是在Firefox中，一切正常，我无法编辑span内容。

你可以在这里找到结果

下面是我的代码:

<style>
.item-disabled{
opacity: 0.3;
pointer-events: none;
}
.media, .media-body, .media-heading{
padding: 15px;
}
.list-unstyled{
padding-left: 0;
list-style: none;
margin-left: -5px;
}
</style>
<div class="item-disabled">
<li class="media">
<div class="media-body">
<div class="media-heading">
<ul class="list-unstyled">
<li><span  contenteditable="true">Span Conetnt</span></li>
</ul>
</div>
</div>
</li>
</div>

Answer 1

我认为目前chrome对pointer-events元素是不稳定的，而Firefox是稳定的。

可以看到，在MDN文档中，Firefox在pointer-events上比chrome更稳定，更兼容https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

我建议在Edge上显示它，因为它更兼容，甚至在可能的情况下使用其他元素来取代该功能，直到Chrome和Firefox在未来更加兼容