父元素设置pointer-events: none时contenteditable子元素Chrome可编辑问题

问题原因 #

这是Chrome和Firefox对pointer-events: none规则的实现差异导致的：

• W3C官方规范仅约定pointer-events: none会让当前元素不响应点击、选中等指针类交互，但没有明确要求该属性必须阻断所有后代元素的交互行为
• Firefox的实现逻辑是父元素设置pointer-events: none后，默认阻断所有后代元素的指针交互，符合你预期的不可编辑效果
• Chrome的实现逻辑是如果后代元素本身属于可交互类型（带contenteditable="true"属性的元素、输入框、按钮等），会忽略父元素的pointer-events: none限制，正常响应交互，所以你依然可以编辑内部span的内容

兼容解决方案 #

如果要让两个浏览器表现一致，可采用以下两种方案：

1. 单独给内部的可编辑元素添加pointer-events: none限制，修改后的span代码如下：

<span contenteditable="true" style="pointer-events: none;">Span Conetnt</span>

2. 如果父容器下有多个可交互元素，不想逐个修改，可通过通用CSS选择器统一配置：

.item-disabled * {
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Nasrin