Ngăn chặn nhấp qua div

Question

Tôi có vùng chứa div chứa nhiều "hàng" dữ liệu, với mỗi mục trong danh sách trong div "listRow" của riêng nó. Tôi đang sử dụng jQuery để làm cho div "listRow" có thể chọn, bằng cách chuyển đổi kiểu dáng css khi được nhấp. Ngoài ra trong mỗi hàng là một div hình ảnh nổi ở bên phải của cha mẹ "listRow" div của nó và chứa một sự kiện onclick. Khi tôi nhấp vào div hình ảnh, sự kiện onclick kích hoạt, nhưng div "listRow" gốc cũng được nhấp và "được chọn".

Làm cách nào để ngăn không cho nhấp chuột qua div hình ảnh của tôi?

pseudo code html:

<div class="listContainer"> 
    <div class="listRow" id="listRow1"> 
     <div class="listItemName">List item #1</div> 
     <div class="listItemIcon"><img src="images/icon.png"></div> 
    </div> 
    <div class="listRow" id="listRow2"> 
     <div class="listItemName">List item #2</div> 
     <div class="listItemIcon"><img src="images/icon.png"></div> 
    </div> 
</div> 

mã jQuery:

$("div.listRow").click(function(){ 
    $(this).toggleClass("selected"); 
}) 

Answer 1

Bạn muốn sử dụng event.stopPropagation():

event.stopPropagation() - Ngăn chặn sự kiện từ bọt lên cây DOM , ngăn không cho bất kỳ người xử lý cha mẹ nào được thông báo về sự kiện này.

Trên trang 's div.listItemIconclick() kiện để ngăn chặn sự bọt sự kiện:

$('div.listItemIcon').click(function(e){ 
    e.stopPropagation(); 
}); 

$("div.listRow").click(function(){ 
    $(this).toggleClass("selected"); 
}); 

jsFiddle example here.

Answer 2

Trong chức năng bấm vào hình ảnh nếu bạn lấy sự kiện này và sử dụng stopPropagation() chức năng sau đó nó nên giữ cho sự kiện không kích hoạt bố mẹ của phần tử. ví dụ.

$('div.listItemIcon').click(function(e){ 
    //your code here 
    e.stopPropagation(); 
});