如果子元素被禁用，Click 事件监听器将不起作用

Question

目标

我希望即使子元素被禁用，父元素也可单击。

示例代码

const parent = document.getElementById('parent');

parent.addEventListener('click', (e) => {
  console.log('hello world')
}, true);

<div id="parent">
  <input disabled placeholder="foo">
</div>

重要的提示

@Drag13 向我指出它可以在Chrome 96. 它不适用于Firefox 95.0Linux 操作系统。

提前致谢！

Answer 1

这是 Firefox 的一个问题，甚至是一个更老的问题。另一方面，在 Chrome 浏览器中，它按预期工作。为了解决这个问题，你可以使用一个小技巧。

将 CSS 属性：添加pointer-events:none;到 disbaled impunt 字段。这会将单击委托给父元素。单击将在父元素中再次评估，因此应该有效。特别感谢@aerial301.

const parent = document.getElementById('parent');

parent.addEventListener('click', (e) => {
  console.log('hello world, now it works :-)')
}, true);

input[disabled] {
    pointer-events:none;
}

<div id="parent">
  <input disabled placeholder="foo">
</div>