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 cancel 🎜>var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
else> //IE
evt.cancelBubble = true;
}

 

JQuery 提供了兩種方式來阻止事件冒泡。
方式一：event.stopPropagation();

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:

程式碼如下: $("#div1").mousedown(function(event){ event.stopPropagation(); });

方式二：return false;

。 >

複製程式碼


程式碼如下:

$("#div1").mousedown(function(event){ return false; });

Jquery阻止預設動作即通知瀏覽器不要執行與事件關聯的預設動作。

例如：




複製程式碼

程式碼如下:


$("a"). click(function(event){ event.preventDefault(); //阻止預設動作即該連結不會跳轉。alert(4);//但是這個還會彈出
event.stopPropagation ();//阻止冒泡事件，上級的單擊事件不會被調用

return false;//不僅阻止了事件往上冒泡，而且阻止了事件本身}); 但這兩種方式是有差別的。 return false 不僅阻止了事件往上冒泡，而且阻止了事件本身。 event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件本身。 場景應用：Google 和 百度的聯想框，當彈出下拉列表，用戶在下拉列表區域按下滑鼠時需要讓遊標仍然保持在文字輸入框。

Jquery案例：

複製程式碼


程式碼如下:

aaaaaaa
baidu.com

js案例：

複製程式碼


程式碼如下:

alert("div");
}
function ttt(){
var e = arguments.callee.caller.arguments[0] || window.event;
window .event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble:e.stopPropagation();
alert(4);
}

ccccc baidu.com