jquery防止下一個事件冒泡

我有簡單的div和複選框裏面。這兩個元素都綁定了onClick事件。首先在內部元素上觸發複選框，然後在div上觸發。我的問題是：是否有可能在第一個事件發生後停止DOM上的其他任何事件直到下一次點擊？換句話說，我可以停止在複選框onClick觸發div事件？jquery防止下一個事件冒泡

<div onclick="divOnClic(this);" style="width: 200px; height: 200px ; background-color: red"> 
    <input type="checkbox" onclick="checkboxOnClick(this);"/> 
</div> 

function divOnClic(e) { 
     alert('z diva'); 
    } 

    function checkboxOnClick(e) { 

     alert('z checka'); 
     e.preventDefault(); 

    }

這裏就是活生生的例子http://jsfiddle.net/QK43u/1/

來源

2014-02-22 kosnkov

你想觸發checkboxOnClick但不是divOnClic？ – jaapaurelio

@jaapaurelio是的，這是我想實現的。 – kosnkov

這將解決你的問題：

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red"> 
     <input type="checkbox" onclick="checkboxOnClick(event);"/> 
    </div> 

    function divOnClic(e) { 
      alert('z diva'); 
     } 

     function checkboxOnClick(e) { 

      alert('z checka'); 
      e.stopPropagation() 

     }

來源

2014-02-22 20:55:20 Gyandeep

我還有兩個觸發的事件 – kosnkov

你有沒有在頁面上加載'jquery'庫？ – Gyandeep

不，我只是從JSFiddle添加到我的帖子示例中，並嘗試使用此解決方案將停止當前事件，但不是父項，此示例顯示無論如何都會觸發div onClick。 – kosnkov

嘗試使用：

e.stopPropagation();

來源

2014-02-22 20:53:13

你能告訴我哪裏？我試過了，但沒有奏效。 – kosnkov

在編輯之前@null可能被認爲是低質量的。 –

它不工作，我仍然有事件被解僱。 – kosnkov

preventDefault（）方法阻止默認事件上執行。它不能防止冒泡。您需要使用stopPropagation（）方法。

$('#myDiv').on('click',divOnClick); 
$('#myCheckBox').on('click',checkboxOnClick); 

function divOnClick(e) { 
    alert('div got clicked'); 
} 
function checkboxOnClick(e) { 
    e.stopPropagation(); 
    alert(e.isPropagationStopped()); 
}

注意：我建議不要使用內聯樣式或內聯事件處理程序。看到這裏的小提琴：http://jsfiddle.net/4Lged/7/

注：事件冒泡是從內部元素和傳播到外部元素。對於div，沒有必要這樣做。捕捉是圍繞div的另一種方式將其事件傳播到樹上。我們不會阻止事件的傳播。

來源

2014-02-22 21:05:14 JohanVdR

不，這也會停止複選框事件，但不會從div中刪除。 – kosnkov

您應該在函數調用中使用event。並使用stopPropagation()防止傳播到父元素。

<div onclick="divOnClic(event);" style="width: 200px; height: 200px ; background-color: red"> 
    <input type="checkbox" onclick="checkboxOnClick(event);"/> 
</div> 

<script> 
    function divOnClic(e) { 
      alert('z diva'); 
     } 

    function checkboxOnClick(e) { 
     e.stopPropagation() 
     alert('z checka'); 
    } 
</script>

來源

2014-02-22 21:06:22 jaapaurelio

jquery防止下一個事件冒泡

回答

相關問題