3

jQuery でイベント添付ファイルを処理するこれら 2 つの方法を組み合わせる方法はありますか?

$('selector').on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown:  function() {},
    mouseup:    function() {}
});

私は前の方法を好みますが、「ライブ」イベントを操作するには次のようなものが必要です (問題は、ハンドラー間にコメントがある場合、これが機能しないことです)。

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           .on('mousedown',  'selector3', function(){})
           .on('mouseup',    'selector4', function(){});

ただし、このようにするための回避策はありますか?:

$(document).on({
    mouseenter: 'selector1': function() {},
    mouseleave: 'selector2': function() {},
    mousedown:  'selector3': function() {},
    mouseup:    'selector4': function() {}
});

アップデート

私はこの単純なon-wrapper 関数で終わった: https://gist.github.com/4191657

使い方はとても簡単です:

$(document).act(
    ['mouseenter', 'selector1', function() {}],
    ['mouseleave', 'selector2', function() {}],
    ['mousedown', 'selector3', function() {}],
    ['mouseup', 'selector4', function() {}]
);

これに対する提案や改善はありますか?

4

2 に答える 2

3

.on()メソッドのjQueryドキュメントをご覧ください。最初の例で使用するイベントマップバージョンを使用する場合は、2番目の引数としてセレクターを渡すことができます。

$(document).on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown: function() {},
    mouseup: function() {}
}, "selector");

これは、これらすべてのイベントに同じセレクターを使用することを前提としています。異なる可能性がある場合は、呼び出しを.on()次のようにチェーンするのが最善のオプションです。

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           // ...etc
于 2012-11-28T12:02:47.780 に答える
0

イベントを定義するときに配列の代わりにオブジェクトを使用できるように、ラッパー関数を改善することができました。Meteor.js と同様の方法でそれを行います。

// inspired by https://gist.github.com/yckart/4191657
// This code allows you to use more easy to read syntax to define events in jQuery
// Usage:
// $(document).events({
//  'click, .target-selector': function() {
//      //your function to trigger when target selector is clicked
//  }
// });

;(function($) {
    $.fn.events = function() {
        var argumentsObject = arguments[0];
        return this.each(function() {   
            for (var propertyName in argumentsObject) {
                if (argumentsObject.hasOwnProperty(propertyName)) {
                    var argumentsToPass = propertyName.split(", ");
                    argumentsToPass.push(argumentsObject[propertyName]);
                    $(this).on(argumentsToPass[0], argumentsToPass[1], argumentsToPass[2]);
                }
            }
        });
    };
})(jQuery);
于 2016-02-04T18:01:09.380 に答える