javascript - html5 为什么点击事件会导致 mouseout 事件？

Question

从我读过的所有文档中，只有当用户实际将鼠标移动到元素边界之外时，才会调用 mouseout 事件。

我观察到，当元素被单击和遮蔽时，也会在元素上触发 mouseout 事件，以使单击的坐标在被遮蔽的元素和遮蔽元素之间重叠。

考虑这个元素：

当我单击元素的绿色部分（与模糊元素重叠的区域）时，我看到跨浏览器的行为不一致。Chrome 和 Firefox 会在被遮挡的元素上触发 mouseout 事件，而 IE 和 Opera 不会在被遮挡的元素上触发 mouseout 事件。根据 HTML/CSS 规范，这种情况是否存在“正确”行为？CSS 视觉格式化模型没有说明任何关于事件处理的内容。

这是代码：

$( '#button' ).on( 'click', function(e) {
    $( '#overlay' ).show();
    log( document.activeElement + ' has the focus' );
});

$( '#button' ).on( 'mouseout', function(e) {
    log( 'target: ' + e.relatedTarget.id );
    log( 'why are you mousing out?' );
});

这是一个工作示例：http: //jsfiddle.net/jmjpro/7Jp2G/6/。

Answer 1

当您显示覆盖时，鼠标不再位于按钮顶部。通过显示覆盖，您正在触发 mouseout 事件。

Answer 2

您的叠加 div 位于按钮 div 的顶部。

这就是当您单击按钮 div 时，会显示覆盖 div 并触发 mouseout 事件的原因。

您可以通过删除所有 css 来测试它。它完全按照您的意愿工作。

Answer 3

绝对定位的元素不是页面流的一部分，它们遵循不同的规则。因此，叠加层不算作原始 div 的一部分，这意味着鼠标在技术上不再位于其上方。