在IE和Chrome之间的div onclick行为中的复选框是不同的

Question

我已获得以下代码：

    <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时（例如点击＆＃34;显示已淘汰的产品＆＃34;文本），它会在两个浏览器中正确触发div的onclick事件。但是，如果单击实际复选框，则Chrome和IE之间的行为会有所不同。

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

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

为什么输入无法在Chrome中切换？我怎样才能使这些行为完全相同？哪个浏览器实际正常工作＆＃34;正确＆＃34;？

如果重要，Chrome版本为40.0.2214.93，IE为11.0.9600.17498。

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

Answer 1

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

的

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

的

here's the fiddle