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

下面的代码在另一个元素（从现在起我将称之为“容器”）的

mouseenter

上将

div

移动到正确的高度，然后随着鼠标的移动，它会调整元素的

left

位置，使其跟随鼠标左右移动

最后，当鼠标离开容器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' });
    }
});

虽然这可以正常工作，但由于鼠标位于

$seek

而不是容器元素上，因此元素会闪烁。当我不想触发时，

mouseleave

事件正在被触发

我怎样才能防止这种情况

---

请注意：

$seeker

元素直接位于

中，因此将始终位于容器元素的“前面”。

稍微重写一下代码，但是为什么不将

鼠标移动

放在容器元素前面的元素上呢

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();
});

---

起初，我认为这是可行的（我必须在mousemove调用中添加“e”，以便tat e.pageX能够拾取它），直到我意识到“mouseleave事件在鼠标离开“.seek”栏时根本没有被调用”。你知道怎么纠正吗？谢谢你的建议。。这是因为您的代码在$seek元素上调用“mouseleave”，而不是在容器元素上调用“.seek head”。经过修改后，您的代码生成的结果与我自己的i'm afriad完全相同。不过，谢谢你的尝试。我想我知道你的意思，是不是建议在条和搜索器的顶部放置一个div，并将其用作“单击区域”？如果你只支持带有CSS3的现代浏览器，你也可以选择

#seek head{pointer events:none}