Question

下面的代码将div移动到另一个元素的mouseenter上的正确高度（从现在开始我称之为'容器'），然后当鼠标移动时调整left {1}}元素的位置，使其左右跟随鼠标。

最后，当鼠标离开容器div时，该元素将被隐藏。

$('body').on('mouseenter mouseleave mousemove', '.seek-bar', function (e) {
    var $seeker = $('#seek-head');

    if (e.type == 'mouseenter') {
        var top = Number($(this).offset().top);
        $seeker.css({ top: top + 'px' }).show();
    }
    else if (e.type == 'mouseleave') {
        $seeker.hide();
    }

    if (e.type == 'mousemove') {
        var x = e.pageX;
        $seeker.css({ left: x + 'px' });
    }
});

虽然这样可以正常工作，但由于鼠标超过$seeker而不是容器元素，元素会闪烁。 {I} mouseleave事件在我不想成为的时候被解雇了。

我该如何防止这种情况？

请注意：$seeker元素直接位于<body>中，因此始终位于容器元素的“前面”。

Answer 1

重新编写了一些代码，为什么不将mouseleave放在容器元素前面的元素上呢？

var $seeker = $('#seek-head');    
$('body').on({
    mouseenter: function() {
        var top = Number($(this).offset().top);
        $seeker.css({ top: top + 'px' }).show();
    },
    mousemove: function() {
        var x = e.pageX;
        $seeker.css({ left: x + 'px' });
    }
}, '.seek-bar');

$('body').on('mouseleave', $seeker, function() {
    $seeker.hide();
});

当元素跟随鼠标时，如何防止mouseleave被触发？

1 个答案: