1

我想要一些方法来向元素添加和删除唯一的命名事件，这样我就可以确保事件不会被添加超过一次。当您将事件添加到元素时，它们会相互堆叠，即使其中两个是同一个事件。对于一个简单但抽象的示例：

$('a').on("click", function(e){ console.log("Hi One"); }); // 1
$('a').on("click", function(e){ console.log("Hi One"); }); // duplicate
$('a').on("click", function(e){ console.log("Hi Two"); }); // 2
// Output will be: Hi One, Hi One, Hi Two

我尝试使用 .off().on() 之类的方法，但一次只允许一个事件。

$('a').off("click").on("click", function(e){ console.log("Hi One"); }); 
$('a').off("click").on("click", function(e){ console.log("Hi One"); }); 
$('a').off("click").on("click", function(e){ console.log("Hi Two"); });
// Output will be: Hi Two

所以我想出了这个jQuery扩展：

$.fn.onUnique = function (
    /* uniqueEventName, events [,selector] [,data], handler(eventObject) */
) {
    var uniqueEventNameArray    = this.data("uniqueEvents") || [];
    var uniqueEventName         = arguments[0];
    if ($.inArray(uniqueEventName, uniqueEventNameArray) == -1) {
        uniqueEventNameArray.push(uniqueEventName);
        this.data("uniqueEvents", uniqueEventNameArray);
        this.on(arguments[1], arguments[2], arguments[3], arguments[4]);
    }
};

这样就可以得到我想要的效果了...

$('a').onUnique("Hi1", "click", function(e){ console.log("Hi One"); }); 
$('a').onUnique("Hi1", "click", function(e){ console.log("Hi One"); }); 
$('a').onUnique("Hi2", "click", function(e){ console.log("Hi Two"); });
// Output will be: Hi One, Hi Two

我的问题有两个：

  1. 有一个更好的方法吗？
  2. 我将如何做相当于 .offUnique() 的操作，它只会删除指定的事件（按名称）？
4

2 回答 2

3

查看命名空间事件：event.namespace

$('a').off('click.hi1').on('click.hi1', function(e){ console.log("Hi One"); });
$('a').off('click.hi1').on('click.hi1', function(e){ console.log("Hi One"); });
$('a').off('click.hi2').on('click.hi2', function(e){ console.log("Hi Two"); });

演示http://jsfiddle.net/gaby/378rP/

但是，您可能应该尝试更好地组织您的代码，这样您就不会两次应用相同的事件..

于 2012-12-18T00:21:01.410 回答
1

.on() 支持您正在寻找的一切。您不仅可以使用唯一的事件名称，还可以通过链接或事件映射映射多个事件：

$('a').on('click.h1', function(){console.log('Hi One')}).on('click.h2', function(){console.log('Hi Two')});

或者

$('a').on({
    'click.h1' : function(){console.log('Hi One')},
    'click.h2' : function(){console.log('Hi Two')}
});
$('a').off('click.h1');
//Output is 'Hi Two'
于 2012-12-18T00:35:05.353 回答