バブリングを停止し、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 は、ターゲット要素からのイベントが親要素にバブルアップするのを防ぎます。例: ·

<div id=&#39;div&#39; onclick=&#39;alert("div");&#39;>
<ul onclick=&#39;alert("ul");&#39;>
<li onclick=&#39;alert("li");&#39;>test</li>
</ul>
</div>

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

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

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

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

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

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

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

次のものは

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

//code from 
<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li>
</ul>
</div>
$("#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 サイトの他の関連記事を参照してください。