jquery - 1 つの要素のみの stopPropagation()

Question

現在、hammer.js を使用して、いくつかのタッチコントロールをページ上の要素にバインドしています。要素を右にスワイプすると、無効のクラスが追加されます。アイテムのクラスが無効になっている場合、基本的に、クラスが無効になっている要素に対してのみ、ダブルタップとスワイプイベントを「バインド解除」したいと考えています。これが可能かどうか誰にもわかりますか？

$('.row').hammer({
    prevent_default: false,
    drag_vertical: false
}).bind('doubletap swiperight', function(e) {
    var $this = $(this)
    if (e.type == "doubletap") {
        confirm("Do You Want To Edit Med?")
    }
    else if (e.type == "swiperight") {
        $this.removeClass('yHighlight');
        $this.addClass('gHighlight disabled');
        $this.css('opacity','.5')
    }

});

score 1 · Accepted Answer

イベントをトリガーした要素にそのクラスがあるかどうかをイベントハンドラー内から簡単に確認できます。もしそうなら、何もせずに戻ります。

.bind('doubletap swiperight', function(e) {
    var $this = $(this);

    // ADDED CODE
    if ($this.hasClass("disabled")) {
        e.stopPropagation();
        return;
    }
    if (e.type == "doubletap") {
        confirm("Do You Want To Edit Med?")
    }
    else if (e.type == "swiperight") {
        $this.removeClass('yHighlight');
        $this.addClass('gHighlight disabled');
        $this.css('opacity','.5')
    }
});

score 1 · Accepted Answer

.on()メソッドに組み込まれているjQueryイベント委任を使用することをお勧めします。.on()の代わりにメソッドを使用してください.bind()。これは、行の親要素のIDが「rowparent」であると想定した例です。

('.row').hammer({
    prevent_default: false,
    drag_vertical: false
});

$('#rowparent').on('doubletap swiperight', '.row:not(.disabled)', function(e) {
    var $this = $(this)
    if (e.type == "doubletap") {
        confirm("Do You Want To Edit Med?")
    }
    else if (e.type == "swiperight") {
        $this.removeClass('yHighlight');
        $this.addClass('gHighlight disabled');
        $this.css('opacity','.5')
    }
});

この.onメソッドは、オプションのセレクター引数を取ります。ダブルタップまたはスワイプライトイベントがバブルアップすると#rowparent、jQueryはそのセレクターに対してイベントのターゲット要素をテストします。したがって、これにより、イベントは自動的に「バインド解除」されます。これは、イベントがそのセレクターとの一致を停止するためです。

行が多い場合は、ハンドラーのクラス名に対してテストする他の回答よりも優れていると思います。単一のイベントハンドラーのみをバインドする方が効率的です。ただし、行が非常に少ない場合は、セレクターが少し重い.hasClassため、メソッド本体で確認する方が効率的です。:not()

score 1 · Accepted Answer

1

if ($this.hasClass('disabled')) return;

于 2012-04-16T22:05:34.997 に答える

jquery - 1 つの要素のみの stopPropagation()

3 に答える 3

Related

Reference