In a mousedown
div 的事件处理程序创建另一个新 div 并将其附加到主体。
这个新的div有position:fixed
(也可以是position:absolute
)并且具有 100% 宽度和 100% 高度。因此它立即覆盖触发鼠标按下事件的源 div。
现在使用最新的 Google Chrome (v30)、最新的 Firefox (v24)、Opera v12.16,甚至在 mousedown 事件之后使用旧版 Safari v5.1.1(在 Windows 上)noclick 事件在附加到正文的事件侦听器上触发。
OnlyInternet Explorer(9 和 10)does之后触发 body 上的点击事件!为什么?如何防止这种情况发生?这实际上是 IE 中的一个错误吗?
HTML:
<div class="clickme">Click me</div>
The 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/ http://jsfiddle.net/Fh4sK/5/
单击“Click me”div后,仅
div mousedown
应该写入控制台,但在 Internet Explorer 中它实际上是
div mousedown
body click
我很感激任何帮助!
EDIT 1:
我找到了一些描述触发点击事件的条件的资源:
http://www.quirksmode.org/dom/events/click.html http://www.quirksmode.org/dom/events/click.html:
“click - 当同一元素上发生 mousedown 和 mouseup 事件时触发。”
http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order
“......一般来说,当关联的 mousedown 和 mouseup 事件的事件目标是同一元素且没有 mouseout 或 mouseleave 事件介入时,应该触发 click 和 dblclick 事件,并且当事件发生时,应该在最近的共同祖先上触发 click 和 dblclick 事件相关的 mousedown 和 mouseup 事件的目标是不同的。”
我不是 100% 确定现在的“正确”行为实际上应该是什么(也许 IE 是唯一能正确处理它的浏览器?)。从最后一句来看,在 body 上触发 click 事件似乎是正确的,因为 body 是两个 div 元素的“最近的共同祖先”。上面引用的 w3.org 页面上还有一些其他语句,它们描述了元素被删除时的行为,但我再次不确定这是否适用于此,因为没有元素被删除,而是被其他元素覆盖。
EDIT 2:
@Evan 打开了一份错误报告,要求微软放弃所描述的行为:https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are- different https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different
EDIT 3:
除了 Internet Explorer 之外,Google Chrome 最近也开始出现相同的行为:https://code.google.com/p/chromium/issues/detail?id=484655 https://code.google.com/p/chromium/issues/detail?id=484655