html5为什么是导致mouseout事件的click事件？

Question

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

我观察到当单击元素并使其模糊时，也会在元素上触发mouseout事件，使得点击的坐标在模糊元素和模糊元素之间重叠。

考虑这个元素：

当我点击元素的绿色部分（与遮蔽元素重叠的区域）时，我看到不同浏览器的行为不一致。 Chrome和Firefox会在模糊元素上触发mouseout事件，而IE和Opera不会在模糊元素上触发mouseout事件。根据HTML / CSS规范，这种情况是否存在“正确”行为？ CSS visual formating model对事件处理没有任何说明。

以下是代码：

$( '#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时，显示overlay div并触发mouseout事件的原因。

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

Answer 3

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