IE 和 Chrome 中的 div onclick 行为中的复选框不同答案

【问题标题】：Checkbox in div onclick behavior is different between IE and ChromeIE 和 Chrome 中的 div onclick 行为中的复选框不同
【发布时间】：2015-04-02 18:54:24
【问题描述】：

我有以下代码：

    <div style="cursor:pointer" onclick="alert('div clicked');">
        <input
            type="checkbox"
            onclick="alert('checkbox clicked');"
            style="pointer-events:none">
            Show Retired Products
    </div>

Here's the JSFiddle for it

当我单击 div 时（例如通过单击“显示退休产品”文本），它会在两个浏览器中正确触发 div 的 onclick 事件。但是，如果我点击实际的复选框，Chrome 和 IE 之间的行为会有所不同。

在 Chrome 中，当我点击实际的复选框时，输入的 onclick 永远不会触发，复选框的状态也不会改变。不过，div 的 onclick 事件确实会触发。

在 IE 中，当我点击实际的复选框时，首先会触发复选框的 onclick 事件，然后触发 div 的 onclick 事件（如果我愿意，可以使用 event.stopPropagation 来阻止）。

为什么不能在 Chrome 中切换输入？我怎样才能使这些行为相同？哪个浏览器实际上“正常”运行？

如果重要的话，Chrome 的版本是 40.0.2214.93，IE 的版本是 11.0.9600.17498。

刚刚在 Firefox 32.0 中测试，功能与 Chrome 相同。

【问题讨论】：

pointer-events:none 在 IE 中的支持不是很差吗？
我尝试删除样式，但这似乎并不重要。
Seems to work 当您删除 pointer-events:none 样式时 (Chrome v40.0.2214.91)
你说得对，我说得太早了。这对 IE 来说似乎无关紧要，但它确实让 Chrome 像 IE 一样工作。谢谢！所以基本上，Chrome 正在听，但 IE 忽略了它？
根据caniuse，pointer-events 应该可以在 IE11 中使用。你确定你有IE11？

标签： html google-chrome internet-explorer

【解决方案1】：

指针事件：无； IE11+ 支持，即使在 IE11 中它也有一些奇怪的行为。一种解决方法是使用透明覆盖来禁用复选框。

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
}

here's the fiddle

【讨论】：