如何防止鼠标在DOM元素中移动时执行鼠标悬停功能 - Backbone Events

I am using Backbone's delegate events to bind a mouseover method to many DIVs with class job-op-wrapper which looks like this -

我使用Backbone的委托事件将鼠标悬停方法绑定到许多DIV与类job-op-wrapper,看起来像这样 -

<div class="job-op-wrapper" data-info="CLEN1">
    <div class="job-op"></div>
    <span class="job-op-code">CLEN1</span>
</div>

This is how i have attached the event handler

这就是我附加事件处理程序的方式

events: {
            "mouseover .job-op-wrapper": "showTooltip",
            "mouseout .job-op-wrapper": "hideTooltip"
        }

this is the event handler whose job is to show the custom tooltip

这是事件处理程序,其作用是显示自定义工具提示

        showTooltip: function (event) {

            // Get the content to be displayed inside the tooltip
            var info = $(event.currentTarget).data('info');
            var html = ['<div class="title">'+info.OpCode+'</div>'];
            html.push('<div class="desc">Description</div>');

            // Display the tooltip
            $('.tooltip').html(html.join(''));
            $('.tooltip').css("opacity", "1");
            $('.tooltip').css("left", ((event.pageX -15) + "px"));
            $('.tooltip').css("top", ((event.pageY - 130) + "px"));
        },

        hideTooltip: function () {
            $('.tooltip').css("opacity", "0");
        }

Now, the problem is, that when the mouse moves WITHIN this DIV, showTooltip method gets executed. As a result, tooltip appears to flickers (which is because I am calculating and changing tooltip's position in the event handler).

现在,问题是,当鼠标在此DIV中移动时,showTooltip方法将被执行。结果,工具提示似乎闪烁(这是因为我正在计算和更改工具提示在事件处理程序中的位置)。

What I want is that it should appear once the mouse enters the DIV and does not change its position while the mouse stays within the DIV. How can I achieve that?

我想要的是它应该在鼠标进入DIV时出现,并且在鼠标停留在DIV内时不会改变其位置。我怎样才能做到这一点?

I tried binding the event handler to following events instead of mouseover for the DIV but, still the tooltip flickers:

我尝试将事件处理程序绑定到以下事件而不是DIV的鼠标悬停,但仍然工具提示闪烁:

hover
focus
mouseenter

I also tried to attach another event handler on mousemove and called event.stopPropagation() and event.preventDefault(). But, it did not work.

我还尝试在mousemove上附加另一个事件处理程序,并调用event.stopPropagation()和event.preventDefault()。但是,它没有用。

Any suggestions ideas?

有什么建议吗?

1 个解决方案

#1

You should replace mouseover with mouseenter and mouseout with mouseleave. These jQuery events will stop the mouseover and mouseout events be called when you enter a child element.

您应该使用mouseenter和mouseleave将鼠标悬停替换为mouseenter。当您输入子元素时,这些jQuery事件将停止鼠标悬停和mouseout事件。

http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/