pointer-events: none不适用于可编辑内容元素

Question

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

但在Firefox中，一切工作正常，我不能编辑span内容。

您可以找到结果here

下面是我的代码：

<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元素是不稳定的，而火狐则更好的是稳定的。

正如您所看到的，在MDN文档中，Firefox比用于pointer-events https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events的chrome更稳定、更兼容。

我建议在Edge上显示它，因为它更兼容，或者甚至在将来Chrome和Firefox更兼容之前，只要有可能，就使用其他元素来替代该功能