0

このようなカスタムイベントを添付できることはわかっています

$("#customDropdownBox").on("clickOutside", function(){
    $(this).hide(300, hideCallback);
})

ボディにクリックイベントを添付して、このようにカスタムイベントが添付されているすべての要素を見つけることができることを知っています

$("body").on("click", function(event){
    $.each($("body *"), function(i, o){
        if($._data(o, "events") && $._data(o, "events")["clickOutside"])
            $(o).trigger("clickOutside");
    })
})

DOMのすべての（*）要素をループすることなく、これを行うためのより高速な方法があるのではないかと思いました。私は次のようなものを使用してフィルタリングできることを知っています

$("body div.classx")

ただし、特定のIDまたはクラスをハードコーディングしたくありません。これを実現できるセレクターがあるのではないかと思っていました。何かのようなもの

$("body *{event:'clickOutside'}")

また

$.findEvent("clickOutside");
4

1 に答える 1

0

@Kevin Bの+1。今日、「モンキーパッチ」と「ダックパンチ」という新しい言葉を学びました:)。それが私がしたことです。これがコードです。ここで詳細に説明されている「オン」および「オフ」メソッドのモンキー パッチとここでのループ

// Monkey patch on and off methods
(function($, window){
    window.clickOutside = [];
    var _oldOn = $.fn.on;
    $.fn.on = function(event,handler){
        if(event == "clickOutside"){
            $.fn.off.apply(this, arguments); // make sure the event is never registered twice
            window.clickOutside.push(this[0]);
        }
        return _oldOn.apply(this, arguments);
    };
    var _oldOff = $.fn.off;
    $.fn.off = function(event,handler){
        if(event == "clickOutside"){
            $.each(window.clickOutside, function(i, o){
                if(this == o){
                    window.clickOutside.splice(i, 1);
                }
            })
        }
        return _oldOff.apply(this, arguments);
    };
})(jQuery, window);

そして今、私のリッスン機能は次のようになりました

// Listen for clickOutside/clickElseWhere events
$("body").on("click", function(event){
    var $target = $(event.target);
    $.each(window.clickOutside, function(i, o){
        if($._data(o, "events") && $._data(o, "events")["clickOutside"] && !$(o).find("*").andSelf().has($target).length){
            $(o).trigger("clickOutside");
        }
    });
});

これにより、その特定のイベントを持つ要素のみをループできました。

于 2012-12-21T21:15:36.513 に答える