バブリングを防ぐjsとイベントバブリングを防ぐjqueryの例の紹介

バブリングを防ぐjsとイベントバブリングを防ぐjqueryの例の紹介_javascriptスキル

WBOY

リリース： 2016-05-16 17:14:16

オリジナル

1160 人が閲覧しました

js でバブリングを防止します
バブリングを防止する処理において、W3C と IE では異なる方式を採用しているため、以下の互換性を持たせる必要があります。

コードをコピーコードは次のとおりです。

 
function stopPro(evt){ 
 var e = evt || window.event; 
//returnValue この属性が設定されている場合、その値はイベント ハンドラーの戻り値よりも優先されます。この属性を fasle に設定すると、
//イベントが発生するソース要素のデフォルトのアクションをキャンセルできます。 
//window.event?e.returnValue = false:e.preventDefault(); 
window.event?e.cancelBubble=true:e.stopPropagation(); 

 

または:

コードをコピーコードは次のとおりです。

function cancelBubble(e ) { 
var evt = e ? e : window.event; 
if (evt.stopPropagation) { 
//W3C 
evt.stopPropagation(); 
else { 
 //IE 
evt.cancelBubble = true; 
} 

 
JQuery はイベントのバブリングを防ぐ 2 つの方法を提供します。 

方法 1:event.stopPropagation();

コードをコピーしますコードは次のとおりです:

$("#div1").mousedown(function(event){

event.stopPropagation(); 
}); 

 
メソッド 2: false を返します。 >

コードをコピーコードは次のとおりです: $("#div1").mousedown(function (event){

return false;

}); 

 
Jquery はデフォルトのアクションをブロックします。つまり、イベントに関連付けられたデフォルトのアクションを実行しないようにブラウザーに通知します。 
例: 

コードをコピーコードは次のとおりです: $(" a"). click(function(event){

event.preventDefault(); //デフォルトのアクションを防止します。つまり、リンクはジャンプしません。

alert(4);//ただし、これもジャンプしません。 Pop up
event.stopPropagation ();//イベントのバブリングを防止します。上位のクリック イベントは呼び出されません
return false;//イベントのバブリングを防止するだけでなく、イベント自体も防止します
}); 
 
 
しかし、これら 2 つの方法には違いがあります。 false を返すと、イベントのバブルアップが阻止されるだけでなく、イベント自体も阻止されます。 event.stopPropagation() はイベントのバブルアップを防ぐだけで、イベント自体は防ぎません。 
シナリオ アプリケーション: Google と Baidu の関連付けボックス。ドロップダウン リストがポップアップするとき、ユーザーはドロップダウン リスト領域でマウスを押すときにテキスト入力ボックスにカーソルを置いたままにする必要があります。 

Jquery の場合:

コードをコピーコードは次のとおりです:

id=" aa" type="button" value="test" />
baidu.com div>

js の場合:

コードをコピーします>

コードは次のとおりです:
function tt(){
alert("div");

} function ttt(){ var e = argument.callee.caller.arguments[0] || window.event?e.returnValue = false:e.preventDefault();イベント?e.cancelBubble: e.stopPropagation(); alert(4);

ccccc

baidu.com