Question

我正在使用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>

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

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

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

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

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

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

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

hover
focus
mouseenter

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

有任何建议吗？

Answer 1

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

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

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

1 个答案: