mouseenter/mouseleave忽略覆盖元素

Question

似乎mouseenter/ mouseleave方法不仅在鼠标坐标进入目标客户端矩形时会触发，而且在另一个元素覆盖或遮挡目标时也会触发。这是一个问题，因为在我的mouseenter 回调中，我想在目标上方显示另一个元素E。我还希望在mouseleave 时E消失。你可以把它看作是重叠的工具提示。

然而，当我把鼠标移动到目标上时，mouseenter会被触发，并且元素E将覆盖它。这种覆盖进一步触发了mouseleave事件，所以E将消失。这进一步触发了mouseenter事件，因此E将再次出现…… 这相当棘手。

因此，基本上，我想知道是否有一个版本的mouseenter/ mouseleave只关心鼠标是否进入或离开目标的客户端矩形，而不管目标是否被覆盖。

更新：@arunopjohny创建了一个JS fiddle来说明这个问题。请参见评论。

- user690421

---

您可以将重叠的元素放置在目标元素的子元素中，这样就不会触发mouseenter/mouseleave事件。 - Arun P Johny

问题在于目标是内联的，而E是块级的。将E作为目标的后代会让浏览器出现问题。@ArunPJohny - user690421

请问 http://jsfiddle.net/arunpjohny/9fNcY/1/ 是否展示了您的问题？ - Arun P Johny

@ArunPJohny 没错，谢谢您创建了那个。正如您所看到的，会出现一个短暂的故障，因为会触发一系列的 (mouseenter、mouseleave、mouseenter) ，而不是单个的 mouseenter。 - user690421

Answer 1

在相关问题中找到了完美的解决方案：忽略覆盖图像上的鼠标交互

"pointer-events: none;" 属性将禁用元素的任何鼠标事件。更重要的是，事件将“穿过”它下面的元素。在我的问题中使用此属性在覆盖元素E上解决了问题。

- user690421

Answer 2

尝试

jQuery(function ($) {
    $('#target').hover(function () {
        var $target = $(this);
        clearTimeout($target.data('hoverTimer'));
        $('#e').show();
    }, function () {
        var $target = $(this);
        var timer = setTimeout(function () {
            $('#e').hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#e').hover(function () {
        clearTimeout($('#target').data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});

示例: Fiddle

- Arun P Johny

---

这解决了当目标和 E 恰好具有相同的位置和大小时的问题。但如果 E 大于目标，则当您将鼠标移出仅目标时，它将不会消失。 - user690421

@user690421，你能帮忙在fiddle中重新创建一下这个问题吗？ - Arun P Johny

是的，这说明了问题。但也许经过再次思考，这正是期望的行为。 - user690421

@user690421 您想要实现什么样的行为？ - Arun P Johny

找到了解决方案，正如我在自己的回答中所提到的。感谢你们愉快的讨论。这是jsfiddle链接：http://jsfiddle.net/Up5jY/ - user690421

期望的行为是 E 不应与鼠标事件交互。它只应该显示和隐藏，鼠标进入或离开应完全依赖于目标。 - user690421