event.preventDefault()を呼び出しているリスナーをアンバインドする方法(jQueryを使用)?


128

jquery toggleはデフォルトでpreventDefault()を呼び出すため、デフォルトでは機能しません。チェックボックスはクリックできません。リンクなどはクリックできません。

デフォルトのハンドラーを復元することは可能ですか?


いくつかのサンプルコードを教えてもらえますか?
ジョジョ

4
タイトルの質問は素晴らしいです!実際の質問は悪くありません...私はここで、preventDefaultそれが呼び出された後の影響を「解除」する方法(可能な場合)への答えを見つけたいと思っていました。現在、この質問は実際には「jQueryを使用してイベントリスナーをアンバインドする方法を教えてください」です。
Stijn de Witt

回答:


80

私の場合:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); デフォルトのアクションを復元する唯一の方法として機能しました。

ここで見られるように:https : //stackoverflow.com/a/1673570/211514


2
この要素に別のクリックハンドラーがある場合は、防止されたハンドラーだけでなく、添付されているすべてのイベントのバインドを解除します...
Aure77

56

そのかなり単純な

あなたが次のようなことをするとしましょう

document.ontouchmove = function(e){ e.preventDefault(); }

それを元の状態に戻すには、以下を実行してください...

document.ontouchmove = function(e){ return true; }

このWebサイトから。


このソリューションは$( '#a_link')。click(function(e){e.preventDefault();});の後には機能しません。unbind関数を使用します。
Denis Makarskiy 2015年

2
あなたが提供したリンクは壊れています。
スタック

16

復元するpreventDefault()ことはできませんが、あなたができることはそれをだますことです:)

<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
   if($(this).hasClass('prevented')){
       e.preventDefault();
       $(this).removeClass('prevented');
   }else{
       $(this).addClass('prevented');
   }
});
</script>

さらに一歩進みたい場合は、トリガーボタンを使用してイベントをトリガーすることもできます。


私はそれがかなり確かである-私は最近デザインでこれをやった 最初にボタンをクリックするだけで、iphoneでのスクロールを防止するために、touchmoveイベントにe.preventDefaultを追加し、アニメーションが完了した後、trueを返し、魅力のように動作しました。
foxybagga 2012年

11
function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);

それが私のために働いた方法は:$(document).off( 'touchmove'); $(document).on( 'touchmove'、function(){return true;});
rogervila

9

場合によってreturn falsee.preventDefault()、最初にの代わりに、デフォルトをに戻したい場合に使用できますreturn true

※イベントバブリングを気にせず、e.stopPropagation()併用しない場合の意味e.preventDefault()

同様の質問も参照してください(スタックオーバーフローにもあります)

またはチェックボックスの場合、次のようなものを持つことができます:

$(element).toggle(function(){
  $(":checkbox").attr('disabled', true);
  },
function(){
   $(":checkbox").removeAttr('disabled');
}) 

9

これを実行することで、デフォルトのアクション(HREFフォローの場合)を復元できます。

window.location = $(this).attr('href');


2
アイデアは正しかったが、そのままではコードが機能しなかった(jqueryの構文が変更されていない限り)。私は次のように使用しました。
Modika、2015年

3

リンクの場合$(this).unbind("click");、リンクのクリックが再度有効になり、デフォルトの動作に戻ります。

これがどのように機能するかを示すために、デモJSフィドルを作成しまし

JSフィドルのコードは次のとおりです。

HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>

JavaScript:

<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
  event.preventDefault();

  $( "<div>" )
    .append( "default " + event.type + " prevented "+counter )
    .appendTo( "#log" );

    if(counter == 2)
    {
        $( "<div>" )
    .append( "now enable click" )
    .appendTo( "#log" );

    $(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
    }
    else
    {
        $( "<div>" )
    .append( "still disabled" )
    .appendTo( "#log" );
    }
    counter++;
});
});
</script>

2

このコードをテストして、私はあなたの問題を解決すると思います:

event.stopPropagation();

参照


デフォルトを妨げるハンドラーの前に発生するハンドラーでstopPropagationを実行する必要があります。他のハンドラがバブルフェーズに登録されている場合は、capturePhaseでこれを行うことができます。
Vitim.us 2017年

2

名前空間を使用してこれを行う最良の方法。安全で安心な方法です。ここで.rbは、バインド解除機能がその特定のキーダウンで機能するが他の機能では機能しないことを保証する名前空間です。

$(document).bind('keydown.rb','Ctrl+r',function(e){
            e.stopImmediatePropagation();
            return false;
        });

$(document).unbind('keydown.rb');

ref1:http : //idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref2:http : //jqfundamentals.com/chapter/events



1

EventインターフェースのpreventDefault()メソッドは、イベントが明示的に処理されない場合、通常のようにデフォルトのアクションを実行してはならないことをユーザーエージェントに伝えます。イベントリスナーの1つがstopPropagation()またはstopImmediatePropagation()を呼び出し、どちらかが一度に伝播を終了しない限り、イベントは通常どおり伝播し続けます。

イベントフローのいずれかの段階でpreventDefault()を呼び出すと、イベントがキャンセルされます。つまり、イベントの結果として実装によって通常行われるデフォルトのアクションは発生しません。

Event.cancelableを使用して、イベントがキャンセル可能かどうかを確認できます。キャンセルできないイベントに対してpreventDefault()を呼び出しても効果はありません。

window.onKeydown = event => {
    /*
        if the control button is pressed, the event.ctrKey 
        will be the value  [true]
    */

    if (event.ctrKey && event.keyCode == 83) {
        event.preventDefault();
        // you function in here.
    }
}

0

一部のカスタムアクション(フォームの入力フィールドを無効にする)が完了した後でのみデフォルトのアクションが必要になるという問題がありました。デフォルトのアクション(submit())を独自の再帰関数(dosubmit())にラップしました。

var prevdef=true;
var dosubmit=function(){
    if(prevdef==true){
        //here we can do something else first//
        prevdef=false;
        dosubmit();
    }
    else{
        $(this).submit();//which was the default action
    }
};

$('input#somebutton').click(function(){dosubmit()});

1
一般的な注意:一部のコーダーif (predef == true)はより明確であると感じていますが、理由もなくJSコードに7文字を追加しています。if (prevdef)読みやすいです。また、パラメーターが渡されない場合.click(dosubmit)と同じことを行う冗長な匿名イベントハンドラーを追加しました.click(function(){dosubmit()})
コーディング終了

0

ブール値を使用します。

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

私はこれをプログレッシブWebアプリで使用して、一部の「ページ」でのスクロール/ズームを防止し、他のページでのスクロールを許可しています。


0

2つのクラスを形成するように設定できます。JSスクリプトをそれらの1つに設定した後、スクリプトを無効にする場合は、バインドされたスクリプトを含むクラスをこのフォームから削除するだけです。

HTML:

<form class="form-create-container form-create"> </form>   

JS

$(document).on('submit', '.form-create', function(){ 
..... ..... ..... 
$('.form-create-container').removeClass('form-create').submit();

});


-10

あなたが何を言っているのかよくわかりません:しかし、これは類似した(そしておそらく同じ)問題の解決策です...

私はよくpreventDefault()を使用してアイテムをインターセプトします。ただし、それが傍受の唯一の方法ではありません...多くの場合、動作を以前と同じように継続するか、停止する「質問」が必要な場合があります。最近のケースでは、次のソリューションを使用しました:

$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));

基本的に、「デフォルトの防止」は、傍受して何か他のことを行うことを意味します。「確認」は...で使用するように設計されています-確認!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.