js阻止事件冒泡

冒泡事件簡介

當咱們點擊一個控件的時候，若是包括這個控件的父控件也有click事件，則會繼續執行。

方法一：event.stopPropagation( );

例如：

<div>
    <p>段落文本內容
        <input type="button" value="點擊" />
    </p>
</div>

html代碼：

// 爲全部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');
  }
  })
 })

此時的代碼確保了被單擊的元素是

，而不是其餘後代元素。如今，單擊按鈕不會再摺疊樣式轉換器，而單擊邊框則會觸發摺疊操做。可是，單擊標籤一樣什麼也不會發生，由於它也是一個後代元素。實際上，咱們能夠不把檢查代碼放在這裏，而是經過修改按鈕的行爲來達到目標 。

阻止事件

1.event.stopPropagation(); // 阻止了事件冒泡，但不會阻擊默認行爲

2.return false; //阻止所有事件

3.event.preventDefault(); //阻止默認事件