Child kiện yếu tố nhấp chuột kích hoạt các sự kiện mẹ nhấp chuột

Giả sử bạn có một số mã như thế này:Child kiện yếu tố nhấp chuột kích hoạt các sự kiện mẹ nhấp chuột

<html> 
<head> 
</head> 
<body> 
    <div id="parentDiv" onclick="alert('parentDiv');"> 
     <div id="childDiv" onclick="alert('childDiv');"> 
     </div> 
    </div> 
</body> 
</html>

Tôi không muốn kích hoạt sự kiện parentDiv nhấp chuột khi tôi bấm vào childDiv, Làm thế nào tôi có thể làm điều này ?

Cập nhật

Ngoài ra, trình tự thực hiện hai sự kiện này là gì?

Nguồn

2012-12-20 Joe.wang

này được gọi là sự kiện bọt, Một điểm tốt để bắt đầu: - http: // stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing – Pranav

Bạn cần phải sử dụng event.stopPropagation()

Live Demo

$('#parentDiv').click(function(event){ 
    event.stopPropagation(); 
    alert(event.target.id); 
});

event.stopPropagation()

Mô tả: Ngăn ngừa các sự kiện từ bọt lên cây DOM, ngăn chặn bất cứ xử lý cha mẹ từ khi được thông báo của sự kiện.

Nguồn

2012-12-20 06:52:54 Adil

nếu bạn có 2 trình xử lý riêng biệt cho phụ huynh và các sự kiện nhấp chuột con và bạn chỉ muốn kích hoạt trình xử lý con bằng sự kiện nhấp chuột trên con, bạn có để gọi event.stopPropagation() trên childDiv, không phải trên parentDiv –

Without jQuery: DEMO

<div id="parentDiv" onclick="alert('parentDiv');"> 
    <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;"> 
    AAA 
    </div> 
</div>

Nguồn

2012-12-20 06:55:27

Phương pháp stopPropagation() dừng bọt của một sự kiện đến các yếu tố cha mẹ, ngăn ngừa bất cứ xử lý cha mẹ từ khi được thông báo về sự kiện này.

Bạn có thể sử dụng phương pháp event.isPropagationStopped() để biết liệu phương pháp này đã từng được gọi hay chưa (trên đối tượng sự kiện đó).

Cú pháp:

Đây là cú pháp đơn giản để sử dụng phương pháp này:

event.stopPropagation()

Ví dụ:

$("div").click(function(event) { 
    alert("This is : " + $(this).prop('id')); 

    // Comment the following to see the difference 
    event.stopPropagation(); 
});

Nguồn

2012-12-20 06:56:53

sự kiện Click Bubbles, bây giờ có nghĩa là gì bằng cách sủi bọt, một điểm tốt để bắt đầu là here. bạn có thể sử dụng event.stopPropagation(), nếu bạn không muốn sự kiện đó nên phổ biến hơn nữa.

Cũng là một liên kết tốt để tham khảo trên MDN

Nguồn

2012-12-20 07:00:26 Pranav

tôi phải đối mặt với cùng một vấn đề và giải quyết nó bằng phương pháp này. html:

<div id="parentDiv"> 
    <div id="childDiv"> 
    AAA 
    </div> 
    BBBB 
</div>

JS:

$(document).ready(function(){ 
$("#parentDiv").click(function(e){ 
    if(e.target.id=="childDiv"){ 
    childEvent(); 
    } else { 
    parentEvent(); 
    } 
}); 
}); 

function childEvent(){ 
    alert("child event"); 
} 

function parentEvent(){ 
    alert("paren event"); 
}

Nguồn

2015-11-23 12:35:08

Child kiện yếu tố nhấp chuột kích hoạt các sự kiện mẹ nhấp chuột

Trả lời

Các vấn đề liên quan