1

我正在编写一个 jQuery 插件并遇到了一个有趣的问题，我想将插件中的事件绑定到 body 并委托给特定的子元素。

这没问题，但是该插件是为支持同一页面上的多个实例而构建的，这导致事件被触发的次数与该插件在页面上存在的次数相同。（已经绑定了很多次了）

除了附加到窗口的布尔标志之外，是否只能从插件代码中绑定一次？

我可以通过在插件代码之外绑定来解决这个问题，因此它只绑定一次，或者确保定时器只设置一次，但是我不想让事件被触发 20 次。如果有其他方法，我正在寻找更多..

可能的解决方案

if (!window.tip.hoverIntent || window.tip.hoverIntent === undefined) {
    //bind handler..
    window.tip.hoverIntent = true;
}

事件处理程序

$('body').on({
    mouseenter: function() {
        clearTimeout(window.tip.timerID);
    },
    mouseleave: function() {
        window.tip.timerID = setTimeout(function() {
            $('.tip-shown').remove();
        }, 250);
    }
}, '.tip-shown');
4

2 回答 2

1

您可以在插件功能之外使用标志

var first_time = true;
$.fn.my_plugin = function() {
    if (first_time) {
        first_time = false;
        $('body').on({
            mouseenter: function() {
                clearTimeout(window.tip.timerID);
            },
            mouseleave: function() {
                window.tip.timerID = setTimeout(function() {
                    $('.tip-shown').remove();
                }, 250);
            }
        }, '.tip-shown');

    }
};
于 2014-04-11T14:00:44.330 回答
0

您可以尝试评估您的处理程序之前是否已被调用然后中断。如下所示：

function eventHandler(e)
{
  if(e.handled !== true)
  {
    e.handled = true;
  }
  return false;
}

那应该只触发一次您的事件。

于 2012-10-10T06:46:23.163 回答