js阻止冒泡及jquery阻止事件冒泡範例介紹_javascript技巧-js教程-PHP中文網

js阻止冒泡及jquery阻止事件冒泡範例介紹_javascript技巧

WBOY

發布： 2016-05-16 17:14:16

原創

1173 人瀏覽過

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