Làm thế nào để ngăn chặn trẻ em ảnh hưởng đến phụ huynh

Question

Làm thế nào để ngăn chặn yếu tố CHILD ảnh hưởng đến yếu tố PARENT?

jQuery:

$("#parent").click(function() { 
    alert('parent clicked'); 
}); 
$("#child").click(function() { 
    alert('child clicked'); 
}); 

HTML:

<div id="parent"> 
    click me - parent 
    <div id="child">click me - child</div> 
</div> 

Nếu bạn nhấp vào trẻ em, phụ huynh cũng được kích hoạt và chúng tôi có 2 cảnh báo.

Vậy làm thế nào tôi có thể ngăn trẻ ảnh hưởng đến cha mẹ?

Answer 1

event.stopPropagation()

$("#child").click(function(event) { 

    event.stopPropagation(); 

    alert('child clicked'); 
}); 

Calling event.stopPropagation() sẽ dừng sự kiện từ bọt lên cây DOM.

Answer 2

Điều này được gọi là event bubbling hoặc event propagation. Điều này có thể được ngăn chặn bằng cách thêm e.stopPropagation() vào mã của bạn. Nếu bạn cũng muốn dừng hành vi mặc định, bạn chỉ cần thực hiện: return false;.

return false; về cơ bản thực hiện cả hai: e.stopPropagation() và e.preventDefault(). Điều này có thể hữu ích nếu bạn đang sử dụng các thẻ <a> chẳng hạn và bạn muốn ngăn trang điều hướng đi sau một lần nhấp.