1

一意の名前付きイベントを要素に追加および削除して、イベントが2回以上追加されないようにする方法が必要です。要素にイベントを追加すると、2つが同じイベントであることが意図されている場合でも、それらは互いにスタックされます。単純ですが抽象化された例の場合：

$('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（）のようなメソッドを使用しようとしましたが、一度に1つのイベントしか許可されません。

$('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

私の質問は2つです：

  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/

ただし、同じイベントを2回適用しないように、コードをより適切に整理するようにしてください。

于 2012-12-18T00:21:01.410 に答える
1

.on（）は、探しているものすべてをサポートします。一意のイベント名を作成できるだけでなく、チェーンまたはevents-mapのいずれかによって複数のイベントをマップすることもできます。

$('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 に答える