使用嵌套元素處理觸摸事件？

Question

我有這個問題與jQuery和我的HTML的佈局。

例如說你有一個ID 一個div元素 「#TEST」和一個子元素與類「嵌套」

<div id="test"> 
    <img class="nested" src="example.jpg"> 
</div> 

的img與Jquery的我有兩個觸摸事件，

$(document).on("click", "#test", function(){ 
    console.log("clicked on test id"); 
}); 

$(document).on("click", ".nested", function(){ 
    console.log("clicked on nested element"); 
}); 

我的問題是在第二個觸摸事件，當用戶clciked在嵌套的項目，這也會觸發第一個元素，因爲顯然它是嵌套的，我不希望發生這種情況。

我很確定這是一個簡單的問題，但我似乎並沒有得到它。

Answer 1

你需要停止與event.stopPropagation（）

$(document).on("click", ".nested", function(e){ 
    e.stopPropagation(); 
    console.log("clicked on nested element"); 
}); 

Answer 2

使用event.stopPropagation（）傳播;

$(document).on("click", "#test", function(){ 
    console.log("clicked on test id"); 
}); 

$(document).on("click", ".nested", function(e){ 
e.stopPropagation(); 
    console.log("clicked on nested element"); 
}); 

參考event.stopPropagation()

Answer 3

使用event.stopPropagation()在子元件click事件：

event.stopPropagation（）：

停止事件的冒泡到父元素，防止任何家長處理者不會被通知事件。 添加

$(document).on("click", ".nested", function(){ 
    event.stopPropagation()// prevents the action without notifying the parent 
    console.log("clicked on nested element"); 
});