JavaScript でのイベントのバブリングを防ぐ方法

方法: 1. stopPropagation() メソッドを使用して、デフォルトの動作である構文「event.stopPropagation()」を禁止しますが、阻止はしません; 2. return メソッドを使用して、デフォルトの動作を阻止しながら禁止します、構文「function() {return false}」。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript でイベントのバブリングを防ぐ方法

ネイティブ JS では、イベント オブジェクト (イベント) に 2 つの主なメソッドがあります;

stopPropagation とPreventDefault

1 つ目はバブリングを無効にすることで、2 つ目はデフォルトの動作を防止することです

注: これはネイティブ JS メソッドであり、jQuery メソッドではありません。イベント パラメーターには任意の変数を使用できます。 e;

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡；
            // preventDefault中文意思是阻止默认行为；
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡；IE678
        }
    }

1. イベントのバブリングを禁止します

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡；
            // preventDefault中文意思是阻止默认行为；
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡；IE678
        }
    }

2. return

    ele.onmouseover=function(){
        return false
    }

# # を使用することもできます。 ＃違い。

return false は、イベントのバブルアップを防ぐだけでなく、イベント自体も防ぎます。

event.stopPropagation() はイベントのバブルアップを防ぐだけであり、イベント自体は防ぎません。

Organization:

1.event.stopPropagation();

イベント処理中、イベントのバブリングは防止されますが、デフォルトではブロックされません。 (実行可能なハイパーリンクのジャンプ)

2.return false;

イベント処理中、イベントのバブリングが防止され、デフォルトの動作も防止されます (ハイパーリンクを実行しないでください)ジャンプ)

バブリングに関連するものはもう 1 つあります:

event.preventDefault();

その機能は次のとおりです: イベント処理中、イベント バブリングはブロックされませんが、デフォルトの動作はブロックされます (すべてのポップを実行するだけです)。ボックスは表示されますが、ハイパーリンク ジャンプは実行されません）

[関連する推奨事項:

JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がJavaScript でのイベントのバブリングを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。