js怎麼停止冒泡和阻止瀏覽器預設行為實例

 <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)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止預設行為。什麼是冒泡事件？如在一個按鈕是綁定一個”click”事件，那麼”click”事件會依次在它的父級元素中被觸發 。 stopPropagation就是阻止目標元素的事件冒泡到父級元素。如：·

e849e780724ad7e3d96667dbe71b15d8
d13c37413a3b74a6f638c2bd0a192e36
e625d1e300d7d5c06d09121b24123e42testbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

上面的，Demo如下,我們點擊test時，會依序觸發alert(“li”),alert(“ul”),alert(“div”)，這就是事件冒泡。

• 測試冒泡

#阻止冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();

• 停止冒泡

 

阻止預設行為

w3c的方法是e.preventDefault() ，IE則是使用e.returnValue = false;

preventDefault它是事件物件(Event)的一個方法，作用是取消一個目標元素的預設行為。既然是說預設行為，當然是元素必須有預設行為才能被取消，如果元素本身就沒有預設行為，呼叫當然就無效了。什麼元素有預設行為呢？如連結3499910bf9dac5ae3c52d5ede7383485，提交按鈕b37f60cf70593a0aa3723567edef162d等。當Event 物件的 cancelable為false時，表示沒有預設行為，這時即使有預設行為，呼叫preventDefault也是不會運作的。

我們都知道，連結3499910bf9dac5ae3c52d5ede7383485的預設動作就是跳到指定頁面，下面就以它為例，阻止它的跳躍：

//假定有链接108bdfb517e761bb879be093c0040de3caibaojian.com5db79b134e9f6b82c0b36e0489ee08ed
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

return false

javascript的return false只會阻止預設行為，而是用jQuery的話則既阻止預設行為又防止物件冒泡。

下面這個使用原生js，只會阻止預設行為，不會停止冒泡

189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac237316d85963b455defc45a0e7b4a3d9b74ebecaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

 

## 下面這個是使用
jQuery，既阻止預設行為又停止冒泡

//code from 
189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac2373169e974483976d37374c9db7635fc7fceacaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
$("#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來代表事件的狀態，例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等；
event物件只在事件發生的過程中才有效。
firefox裡的event跟IE裡的不同，IE裡的是全域變量，隨時可用；firefox裡的要用參數引導才能用，是執行時的臨時變數。

在IE/O​​pera中是window.event，在Firefox中是event；而事件的對象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。

下面兩句效果相同：

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中文網其他相關文章！