JQuery在元素级别内联再现onmouseenter逻辑

JQuery reproducing onmouseenter logic inline at element level

本文关键字：onmouseenter 逻辑 元素 JQuery      更新时间：2023-09-26

我有一个非常大的HTML页面，作为批更新/验证过程的一部分，企业用户在其中显示数千条数据库记录。

在页面中，我需要为许多元素添加工具提示。以前我们在<head>:中使用了可靠的方法

$("elementID").mouseenter(function(){
    // tool tip logic
    // goes here
});

问题是，这会增加数万行JavaScript，并导致巨大的性能问题。因此，我正在研究将其应用于元素级别的差异。因此，我没有为每个需要工具提示的元素提供上面的代码，而是声明一个单独的脚本块，如下所示：

function ShowTooltip(ctrl, tooltip) {
    var o = $(ctrl).offset();
    var y = o.top;
    var x = o.left;
    $("#ttfloat").css({ top: o.top, left: o.left });
    $("#ttfloat").html(tooltip);
    $("#ttfloat").show();
}
function HideToolTip() {
    $("#ttfloat").hide();
}

然后对每个元素使用以下方法进行发射：

<div id="ttfloat">&nbsp;</div>
<p>Tool tip <span id="lbl1" runat="server" onmouseover="ShowTooltip(this, 'Tip Text');" onmouseout="HideToolTip();">appears here</span></p>

问题是，当鼠标悬停在<span>元素上时，当浏览器重复触发onmouseover时，工具提示元素会闪烁。我在其他SO解决方案中读到JQuery mouseenter是解决这一问题的方法，但只能找到将事件连接在头部的示例。它可以在元素中在线完成吗？或者有更好的方法吗？该解决方案必须适用于较旧的浏览器，并且符合标准。

参见JSFiddle

这样的东西怎么样：

<span data-tooltip-text="Tip text here">blah blah</span>

然后：

$("[data-tooltip-text]").on({
    mouseenter : function() {
      var o = $(this).offset();
      var tooltip = $(this).attr("data-tooltip-text");
      $("#ttfloat").css({ top: o.top, left: o.left })
                   .html(tooltip)
                   .show();
    },
    mouseleave : function() {
      $("#ttfloat").hide();
    }
});

演示：http://jsfiddle.net/szCU2/2/

我建议你稍微偏移一下工具提示的垂直位置，这样它就不会完全覆盖你悬停的元素（这看起来很笨重，可能会导致鼠标离开事件，因为鼠标当时在工具提示上）：

o.top + 18; // or whatever offset works for you

演示：http://jsfiddle.net/szCU2/3/

如果所有div的行为都相同，则应该使用类选择器而不是id选择器，并简单地将该类添加到所有div中。然后你只需要一次代码，而不是为每个div都有一个副本。把数据存储在有用的地方（比如div的自定义属性），然后在代码中使用它。

html:

<div id="blah" class="divWithTooltip" data-custom-attribute="some tooltip text">

javascript:

$('.divWithTooltip')
    .on('mouseenter', function() {
      someMethodToDoYourTooltipStuff( $(this).attr('data-custom-attribute') );
    })
    .on('mouseout', function() {
       someMethodToHideYourTooltip();
    });
相关文章：