ホームページ > ウェブフロントエンド > jsチュートリアル > バブリングを停止し、js でブラウザーのデフォルト動作を防ぐ方法

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

零下一度
リリース: 2017-06-26 11:45:30
オリジナル
1225 人が閲覧しました
 <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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート