javascript - 在 jQuery mousedown 处理程序中添加覆盖后，Internet Explorer 会泄漏单击事件

Question

在一个 div 的 mousedown 事件处理程序中，另一个新的 div 被创建并附加到 body。
这个新的 div 有 position:fixed(也可以是 position:absolute)并且有 100% 的宽度和 100% 的高度。因此它会立即覆盖触发鼠标按下事件的源 div。现在使用最新的 Google Chrome (v30)、最新的 Firefox (v24)、Opera v12.16，甚至在 mousedown 事件 no click 事件被触发后使用旧的 Safari v5.1.1(在 Windows 上)附加到主体的事件监听器。
只有 Internet Explorer(9 和 10)确实随后触发 body 上的点击事件!为什么？如何防止这种情况发生？这实际上是 IE 中的错误吗？

HTML:

<div class="clickme">Click me</div>

CSS:

.clickme {
    background-color: #BBB;
}

.overlay {
    position: fixed; /* or absolute */
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
}

JavaScript:

$(document).on('click', function(event) {
    console.log('body click');
});

$('.clickme').on('mousedown', function(event) {
    console.log('div mousedown');
    
    var mask = $('<div></div>');
    mask.attr('class', 'overlay');
    mask.appendTo('body');
});

这是一个带有一些附加注释的示例:http://jsfiddle.net/Fh4sK/5/

点击“Click me”div后，仅

div mousedown

应该写到控制台，但在 Internet Explorer 中它实际上是

div mousedown
body click

感谢您的帮助!

编辑 1:

我找到了一些描述何时触发点击事件的条件的资源:

http://www.quirksmode.org/dom/events/click.html:
"click - Fires when a mousedown and mouseup event occur on the same element."

http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order
"...in general should fire click and dblclick events when the event target of the associated mousedown and mouseup events is the same element with no mouseout or mouseleave events intervening, and should fire click and dblclick events on the nearest common ancestor when the event targets of the associated mousedown and mouseup events are different."

我不是 100% 确定现在的“正确”行为实际上应该是什么(也许 IE 是唯一可以正确处理它的浏览器？)。从最后一句话看来，触发 body 上的 click 事件似乎是正确的，因为 body 是两个 div 元素的“最近的共同祖先”。上面引用的 w3.org 页面上还有一些其他陈述，描述了元素被删除时的行为，但我再次不确定这是否适用于此，因为没有元素被删除，但被另一个元素覆盖。

编辑 2:

@Evan 打开了一个错误报告，要求 Microsoft 放弃所描述的行为:https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different

编辑 3:

除了 Internet Explorer 之外，Google Chrome 最近也开始出现相同的行为:https://code.google.com/p/chromium/issues/detail?id=484655

Answer 1

我也遇到了这个问题。我决定制作一个 jQuery 插件来解决这个问题并将其放在 GitHub 上。

都在这里了，欢迎反馈:https://github.com/louisameline/XClick

@mkurz:感谢您找到 W3 指令，您为我节省了很多时间。@vitalets:我解决了这个问题，因为我像你一样使用 select2(你让我想到了这个话题)。我将 fork select2 存储库并为对此感兴趣的人留言。

我会看看是否可以让 Microsoft 人员看一下它，并希望能改变这种恼人的点击行为。