jquery toggleはデフォルトでpreventDefault()を呼び出すため、デフォルトでは機能しません。チェックボックスはクリックできません。リンクなどはクリックできません。
デフォルトのハンドラーを復元することは可能ですか?
preventDefault
それが呼び出された後の影響を「解除」する方法(可能な場合)への答えを見つけたいと思っていました。現在、この質問は実際には「jQueryを使用してイベントリスナーをアンバインドする方法を教えてください」です。
jquery toggleはデフォルトでpreventDefault()を呼び出すため、デフォルトでは機能しません。チェックボックスはクリックできません。リンクなどはクリックできません。
デフォルトのハンドラーを復元することは可能ですか?
preventDefault
それが呼び出された後の影響を「解除」する方法(可能な場合)への答えを見つけたいと思っていました。現在、この質問は実際には「jQueryを使用してイベントリスナーをアンバインドする方法を教えてください」です。
回答:
私の場合:
$('#some_link').click(function(event){
event.preventDefault();
});
$('#some_link').unbind('click');
デフォルトのアクションを復元する唯一の方法として機能しました。
ここで見られるように:https : //stackoverflow.com/a/1673570/211514
そのかなり単純な
あなたが次のようなことをするとしましょう
document.ontouchmove = function(e){ e.preventDefault(); }
それを元の状態に戻すには、以下を実行してください...
document.ontouchmove = function(e){ return true; }
このWebサイトから。
復元する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>
さらに一歩進みたい場合は、トリガーボタンを使用してイベントをトリガーすることもできます。
場合によってreturn false
はe.preventDefault()
、最初にの代わりに、デフォルトをに戻したい場合に使用できますreturn true
。
※イベントバブリングを気にせず、e.stopPropagation()
併用しない場合の意味e.preventDefault()
同様の質問も参照してください(スタックオーバーフローにもあります)
またはチェックボックスの場合、次のようなものを持つことができます:
$(element).toggle(function(){
$(":checkbox").attr('disabled', true);
},
function(){
$(":checkbox").removeAttr('disabled');
})
これを実行することで、デフォルトのアクション(HREFフォローの場合)を復元できます。
window.location = $(this).attr('href');
リンクの場合$(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>
名前空間を使用してこれを行う最良の方法。安全で安心な方法です。ここで.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/
無効にする:
document.ontouchstart = function(e){ e.preventDefault(); }
有効化:
document.ontouchstart = function(e){ return true; }
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.
}
}
一部のカスタムアクション(フォームの入力フィールドを無効にする)が完了した後でのみデフォルトのアクションが必要になるという問題がありました。デフォルトのアクション(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()});
if (predef == true)
はより明確であると感じていますが、理由もなくJSコードに7文字を追加しています。if (prevdef)
読みやすいです。また、パラメーターが渡されない場合.click(dosubmit)
と同じことを行う冗長な匿名イベントハンドラーを追加しました.click(function(){dosubmit()})
。
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();
});
あなたが何を言っているのかよくわかりません:しかし、これは類似した(そしておそらく同じ)問題の解決策です...
私はよくpreventDefault()を使用してアイテムをインターセプトします。ただし、それが傍受の唯一の方法ではありません...多くの場合、動作を以前と同じように継続するか、停止する「質問」が必要な場合があります。最近のケースでは、次のソリューションを使用しました:
$("#content").on('click', '#replace', (function(event){
return confirm('Are you sure you want to do that?')
}));
基本的に、「デフォルトの防止」は、傍受して何か他のことを行うことを意味します。「確認」は...で使用するように設計されています-確認!