状态为禁用 disabled 的 input 元素，监听点击事件的问题

问题现象：

状态为 disabled 的 input 不在自身和父级触发点击事件

问题原因：

Google Chrome 浏览器在更新 116 版本之后，禁止了状态为 disabled 的 input 的事件冒泡。

可能的解决方法：

1. 对于 input 元素，使用 readonly 替代 disabled；
2. 如果在 input 的父级做监听，可以对 input 使用 pointer-events: none; 的样式；
3. 如果监听绑定在 input 本身，用 pointerup/pointerdown 替代 click 事件；

问题详情：

https://bugs.chromium.org/p/chromium/issues/detail?id=1477379...

https://support.google.com/chrome/thread/231871942/click-even...

Google Chrome 浏览器在更新 116 版本之后，禁止了状态为 disabled 的 input 的事件冒泡。
这项改动的解释是“为了对齐HTML标准和Firefox的行为( in order to conform to the HTML spec and firefox's behavior)”。

即造成如下后果:

<div id="wrapper">
    <input id="ipt" disabled>
</div>
<script>

document.querySelector('#wrapper').addEventListener('click', () => { console.log('div 内被点击') })

document.querySelector('#ipt').addEventListener('click', () => { console.log('input 被点击') })
</script>

以上代码的两个事件都不会被触发；