JavaScript中兩種阻止事件冒泡的方法

1、什麼是JS事件冒泡

在一個物件上觸發某一類事件（例如點擊onclick事件），如果此物件定義了此事件的處理程序，那麼此事件就會呼叫這個處理程序，如果沒有定義此事件處理程序或事件傳回true，那麼這個事件就會向這個物件的父級物件傳播，從裡到外，直到它被處理（父級物件所有同類事件都將被啟動），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）。

2、阻止方法

方法一：event.stopPropagation( )

<div>
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );
//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} );
//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）  
} );

方法二：event .target

現在，事件處理程序中的變數event保存事件物件。而event.target屬性則保存著發生事件的目標元素。這個屬性是DOM API中規定的，但是沒有被所有瀏覽器實作 。 jQuery對這個事件物件進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。透過.target，可以確定DOM中首先接收到事件的元素（即實際被點擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，所以可以編寫下列程式碼：

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

 此時的程式碼確保了被點擊的元素是1de1e0968f33ca4e1f437b497ef6a3e2 ，而不是其他後代元素。現在，點擊按鈕不會再折疊樣式轉換器，而點擊邊框則會觸發折疊操作。但是，點擊標籤同樣什麼也不會發生，因為它也是一個後代元素。實際上，我們可以不把檢查程式碼放在這裡，而是透過修改按鈕的行為來達到目標 。

#

以上是JavaScript中兩種阻止事件冒泡的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！