バブリングを停止し、js でブラウザーのデフォルト動作を防ぐ方法

 <br>

イベント互換

function myfn(e){ var evt = e ? e:window.event; }

jsはバブリングを停止します

function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}

jsはデフォルトの動作を防止します

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

バブリングを防止します

w3cのメソッドはe.stopPropagation()、IEはe.cancelBubble = true

を使用します

stopPropagation もイベント オブジェクト (Event) のメソッドの機能は、ターゲット要素のバブリング イベントを防止することですが、デフォルトの動作は防止されません。バブリングイベントとは何ですか？ 「クリック」イベントがボタンにバインドされている場合、「クリック」イベントはその親要素で順番にトリガーされます。 stopPropagation は、ターゲット要素からのイベントが親要素にバブルアップするのを防ぎます。例: ·

e849e780724ad7e3d96667dbe71b15d8
d13c37413a3b74a6f638c2bd0a192e36
e625d1e300d7d5c06d09121b24123e42testbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

上記のデモは次のようになります。test をクリックすると、alert("li")、alert("ul")、alert("div") が順番にトリガーされます。これがイベント バブリングです。 。

• バブリングをテスト

バブリングを停止

window.event? window.event.cancelBubble = true : e.stopPropagation();

• バブリングを停止

デフォルトの動作をブロック

w 3cのメソッドはe.preventDefault()、IEですuse e.returnValue = false;

preventDefault イベントオブジェクト(Event)のメソッドであり、その機能は対象要素のデフォルトの動作をキャンセルすることです。デフォルトの動作について話しているので、要素自体がデフォルトの動作を持っていない場合、当然、その要素はキャンセルする前にデフォルトの動作を持っている必要があります。どの要素にデフォルトの動作がありますか?リンク 3499910bf9dac5ae3c52d5ede7383485、送信ボタン 54b28e0e73a12e4a8ed487872a6fb5b8 など。イベント オブジェクトの cancelable が false の場合、デフォルトの動作がないことを意味します。デフォルトの動作があっても、preventDefault の呼び出しは機能しません。

リンク 3499910bf9dac5ae3c52d5ede7383485 のデフォルトのアクションは、指定されたページにジャンプすることであることは誰もが知っています。ジャンプを防ぐための例として考えてみましょう。

//假定有链接108bdfb517e761bb879be093c0040de3caibaojian.com5db79b134e9f6b82c0b36e0489ee08ed
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

javascript の return false は、デフォルトの動作を防止しますが、

jQuery を使用してデフォルトの動作を防止し、オブジェクトのバブリングを防止します。

次のものはネイティブ js を使用しています。これはデフォルトの動作を防ぐだけで、バブリングは停止しません

189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac237316d85963b455defc45a0e7b4a3d9b74ebecaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

次のものは

jQuery を使用しています。これは、デフォルトの動作を防止し、バブリングを停止します

//code from 
189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac2373169e974483976d37374c9db7635fc7fceacaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
$("#testC").on('click',function(){
return false;
});

デモ: バブリングの停止とデフォルト動作の防止の両方

caibaojian.com

使用法の概要

バブリング動作を停止する必要がある場合は、

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

を使用できます。デフォルトを防止する必要がある場合動作には、使用できます

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

イベント アテンション ポイント

event は、イベント オブジェクトをトリガーした要素、マウスの位置とステータス、押されたキーなどのイベントのステータスを表します

;

1. event オブジェクトはイベント中にのみ有効です。

2. Firefox のイベントは IE のイベントとは異なり、グローバル変数でいつでも使用できます。Firefox のイベントはパラメーター ガイダンスによってのみ使用でき、実行時の一時変数です。

   IE/Opera では window.event、Firefox ではevent、イベントのオブジェクトは IE では window.event.srcElement、Firefox ではevent.target で、どちらも Opera で使用できます。

次の 2 つの文は同じ効果があります:

1. function a(e){
   var e = (e) ? e : ((window.event) ? window.event : null); 
   var e = e || window.event; // firefox下window.event为null, IE下event为null
   }

    <br>

以上がバブリングを停止し、js でブラウザーのデフォルト動作を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。