preventDefault,stopPropagation,return falseの3つの違い

3718 ワード
スレをぶらぶらしていると道友発の先端面接問題を見て、
preventDefault()、stopPropagation()、return falseの3つの違い
この3つの使い方はよく知られていないと思いますが、よく考えてみるとやはり究明できるところがあります.
preventDefault()
ブラウザでの要素のデフォルトの動作をブロック
Webサイト
$('#link').click(function(event){
    event.preventDefault(); //    a  href      
})

stopPropagation()
イベントバブル:マウスがボタンをクリックすると、同じイベントがボタン要素のすべての親/祖先要素でトリガーされます.このプロセスはイベントバブルと呼ばれています.これは、子要素が先にトリガーされ、親要素が後でトリガーされ、内側から外側(下から上へ)になるプロセスです.これとは逆の順序でイベントキャプチャが行われます.
≪イベントのキャプチャ|Event Capture|emdw≫:親要素が先にトリガーされ、子要素が後でトリガーされます.ここでは説明します.
$('#btn').click(function(event){
event.stopPropagation();//「inner,body」のクリックイベントはトリガーされません.
console.log('#btn')
})
$('#inner').click(function(event){
//#btnは泡を止め、ここでは実行しません
//stopPropagationを使用しない場合、#btnがクリックすると、ここでも実行されます
console.log('#inner')
})
$('body').click(function(event){
//#btnは泡を止めた.btnクリックは私に影響しません
//stopPropagationを使用しない場合、#btnがクリックすると、ここでも実行されます
console.log('body')
})
//stopPropagation()出力を使用
'#btn'
//stopPropagation()出力を使用しない
'#btn'
'#inner'
'body'
stopImmediatePropagation()
オブジェクトバインドの残りのイベント処理関数メソッドの実行を阻止し、現在のイベントのバブルを阻止します.stopImmediatePropagationはstopPropagationのアップグレード版であり、バブルを阻止するだけでなく、現在のオブジェクトが実行していない他のバインドイベントメソッドを終了することも阻止することができると理解できます.
jQueryの1つのオブジェクトは複数のイベントメソッドをバインドでき、実行順序はバインドの前後順に実行されます.

    

        
stopImmediatePropagation()  

        



$('body').click(function(event){
    // body   
    console.log('body');
});

$('#inner').click(function(event){
    // #inner   
    console.log('#inner');
})

$('#btn').click(function(event){
    //    #btn  
    e.stopImmediatePropagation();
    console.log('#btn 1');
})

$('#btn').click(function(event){
    //    #btn  
    console.log('#btn 2')
})

//     
'#btn 1' // (  stopImmediatePropagation   #btn             ，       )

//      stopImmediatePropagation，    
'#btn 1'
'#btn 2'
'#inner'
'body'
               ，

return false
「return false」は、ブラウザでの要素のデフォルトの動作を阻止するために使用される学生が多いと信じています.preventDefault()として使用されていますが、「return false」が行うことは、デフォルトの動作を阻止するだけではありません.
「return false」を呼び出すと、次の3つのことが実行されます.
  • event.preventDefault()
  • event.stopPropagation()
  • コールバック関数の実行を停止し、
    • に戻る.
    1、2時は分かりやすいですが、3時はどうなっていますか.return文は、関数の実行を終了し、関数の値を返します.したがってfalseまたは他の値を返すかどうかにかかわらず、return文の後のコードは実行されません.falseに戻り、preventDefaultとstropPropagationの機能を備えます.
    $('a').click(function(){
    return false; // return false     ，     alert
    alert('       ');
})

// preventDefault   stopPropagation

    まとめ
    多くのjQueryチュートリアルでは、コードプレゼンテーションで「return false」を使用してブラウザのデフォルトの動作を阻止します.長い間、多くの学生はpreventDefaultの代わりに「return false」を乱用することに慣れていた.
    多くの場合、preventDefaultとの機能を実行したいだけですが、他の2つのステップを勝手に実行してあげました.比較的良いプログラミング習慣は、このイベントメソッドを使用して呼び出す必要があります.そうしないと、冗長イベントの実行を避ける必要があります.prevnetDefaultのように、親ノードがイベントの処理を継続することを阻止することなく、コードをより柔軟にし、メンテナンスを容易にします.
    日常開発では、preventDefaultとstopPropagationを同時に必要とし、コールバック関数の実行が完了した後に呼び出す必要がある場合を除き、「return false」を使用することができます.そうしない場合は、preventDefaultまたはstopPropagationを使用するほうがいいです.
    作者:楽の名で本文はオリジナルで、不適切なところがあれば指摘を歓迎します.転載は出典を明記してください.
    参考記事:『preventDefault()、stopPropagation()、return falseの違い』
    Outオブジェクト
    携帯端末のいくつかの設定...