JS のバブリングとブラウザのデフォルト動作を防ぐ方法

今回は、JS のバブリングを防ぐ方法とブラウザのデフォルトの動作について説明します。 JS のバブリングを防ぐための 注意事項 は実際的なケースです。見てください。

イベント互換:

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();
}

以下は JavaScriptstop に特有のものですデフォルト動作のバブリングとブロックの詳細説明

バブリングを防ぐには

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();

デフォルトの動作を防ぐ

w3cメソッドはe.preventDefault()、IEはe.returnValue = false;を使用します

preventDefault イベントオブジェクト(Event)のメソッドであり、その機能はcancel ターゲット要素のデフォルトの動作。デフォルトの動作について話しているので、要素自体がデフォルトの動作を持っていない場合、当然、その要素はキャンセルする前にデフォルトの動作を持っている必要があります。どの要素にデフォルトの動作がありますか?リンク 、送信ボタン など。イベント オブジェクトの 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;
}
}

return 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 を使用します。これは、両方とも防止しますデフォルトの動作とバブリングの停止

<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;
});

使用法の概要

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

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 は、イベント オブジェクト要素のトリガー、マウスの位置とステータス、押されたキーなどのイベントのステータスを表します。

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

Firefox のイベントは IE のイベントとは異なります。IE のイベントはグローバル変数でいつでも使用できます。Firefox のイベントはパラメーターによってガイドされる場合にのみ使用でき、実行時の一時変数です。
IE/Opera では window.event、Firefox ではevent、イベントのオブジェクトは IE では window.event.srcElement、Firefox ではevent.target で、どちらも Opera で使用できます。

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQueryがマスターしなければならないAPI

ajaの非同期アップロードプラグイン

jQueryは多層検証の後にフォーム検証を実装します

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