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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。