web-dev-qa-db-ja.com

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

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

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

javascriptjqueryeventspreventdefaultevent-bubbling
127
user188049

私の場合：

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

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

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

77
klaus

そのかなりシンプルな

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

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

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

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

これから ウェブサイト 。

55
foxybagga

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>

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

16
Val
function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

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

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

これを行うことにより、デフォルトのアクションを復元できます（HREFフォローの場合）。

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

9
crmpicco

場合によっては、最初にe.preventDefault()の代わりにreturn falseを使用してから、デフォルトをreturn trueに復元したいときに使用できます。

*イベントのバブルを気にせず、e.stopPropagation()をe.preventDefault()と一緒に使用しない場合の意味

同様の質問 も参照してください（スタックオーバーフローでも）

またはチェックボックスの場合、次のようなものを使用できます。

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

リンクの場合、$(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
Rahul Gupta

このコードをテストして、問題を解決すると思います。

event.stopPropagation();

参照

2
Alireza MH

名前空間を使用してこれを行う最良の方法。これは安全で安全な方法です。ここで、.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

2
Rajkumar Bansal

無効にする：

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

有効にする：

document.ontouchstart = function(e){ return true; }
1
Brynner Ferreira

いくつかのカスタムアクション（フォームの無効な入力フィールドを有効にする）が完了した後にのみ、デフォルトのアクションが必要になるという問題がありました。デフォルトのアクション（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()});
0
Gyula

ブール値を使用します。

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

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

0
TennisVisuals

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();

});
0
Dumitru Boaghi