Dừng stopPropgation có ngăn chặn sự kiện phát tán trong giai đoạn chụp không?

Question

tôi đang tìm kiếm tại http://www.quirksmode.org/js/events_order.html và nó là mơ hồ trong phần này:

Trong mô hình của Microsoft, bạn phải thiết lập thuộc tính cancelBubble của sự kiện thành true.

window.event.cancelBubble = true 

Trong mô hình W3C, bạn phải gọi phương thức stopPropagation() của sự kiện.

e.stopPropagation() 

Điều này sẽ dừng mọi tuyên truyền của sự kiện trong pha sủi bọt.

Vì vậy, câu hỏi của tôi là:

• Khi một người biết lắng nghe sự kiện được thiết lập để lắng nghe trong giai đoạn nắm bắt, nó sẽ tự động không tiếp tục tuyên truyền đến các yếu tố bên trong?
• Hoặc nếu nó tiếp tục tuyên truyền, hãy gọi e.stopPropagation() để dừng hoặc chỉ làm việc cho giai đoạn bong bóng?

Answer 1

Không, trình xử lý sự kiện không ngăn bất kỳ sự kiện nào lan truyền, trừ khi bạn nói rõ. Phần bạn đang đề cập đến các giao dịch với pha bong bóng đặc biệt. Mô hình của IE không hỗ trợ bắt sự kiện - dừng hoàn toàn. giai đoạn bắt giữ là giai đoạn trước giai đoạn tạo bọt:

Top of the DOM --->event--->traverses--->to--->[target]+[event]-| (capture phase) 
     /\              \/ 
     |------------------------to--------back up----------------- (bubble up) 

Answer 2

stopPropagation() sẽ không dừng trình xử lý sự kiện bị bắt. stopPropagation() sẽ ngừng xử lý sự kiện sôi nổi từ việc gọi.

Jsfiddle

var outputDiv = document.getElementById('output'); 
 

 
function log(msg) { 
 
    outputDiv.insertAdjacentHTML('afterend', msg + '<br>'); 
 
} 
 

 
///////////////////// 
 
//Bubbling listeners 
 
///////////////////// 
 
document.getElementById('row1').addEventListener('click', function(e) { 
 
    log('Bubbling row1 listener called'); 
 
    e.stopPropagation(); 
 
}, false); 
 

 
document.getElementById('row2').addEventListener('click', function(e) { 
 
    log('Bubbling row2 listener called'); 
 
    //NO stopPropagation on this one. 
 
}, false); 
 

 
document.getElementById('table').addEventListener('click', function() { 
 
    log('Bubbling table listener called'); 
 
}, false); 
 

 

 
document.addEventListener('click', function() { 
 
    log('Bubbling document listener called'); 
 
}, false); 
 

 
///////////////////// 
 
//Capturing listeners 
 
///////////////////// 
 
document.addEventListener('click', function() { 
 
    log('Capturing document listener called'); 
 
}, true); 
 

 
document.getElementById('table').addEventListener('click', function() { 
 
    log('Capturing table listener called'); 
 
}, true);

#outputwrapper { 
 
    border: 1px solid black; 
 
    height: 300px; 
 
    overflow: scroll; 
 
}

<table id="table" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="row1"> 
 
     This row has stopPropagation 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="row2"> 
 
     This row does not have stopPropagation 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br>Output 
 
<br> 
 
<div id="outputwrapper"> 
 
    <div id="output"></div> 
 
</div>

Answer 3

Câu trả lời ngắn: Thứ tự là:

1. Capture (giảm)
2. Target
3. Bubble (up).

Nếu bạn gọi e.stopPropagation() trong giai đoạn chụp (bằng cách thiết lập 's addEventListener()luận 3rd để true), nó dừng lại ở mức 1, vì vậy 2 & 3 không thể nhận được nó.

Nếu bạn gọi e.stopPropagation() trong giai đoạn bong bóng (bằng cách thiết lập 's luận 3rd để false hay chỉ là không gán nó addEventListener()), 1 & 2 đã hoàn chỉnh, vì vậy nó chỉ ngăn chặn sự kiện từ bọt lên từ cấp độ bạn gọi stopPropagation().

Answer 4

sự kiện.stopPropagation() - Không dừng các hành động trình duyệt mặc định (chẳng hạn như: chuyển đổi, khi bạn nhấp vào thẻ 'a').

Nếu bạn không muốn dừng chúng, bạn phải sử dụng event.preventDefault(). Nó sẽ làm việc với babble và nắm bắt các loại sự kiện.

Ví dụ với loại sự kiện lảm nhảm:

<a href="/" onclick="event.preventDefault()">Click here</a>

Để vô hiệu hóa tất cả các loại của các hành động liên quan với trường hợp đã được chạy ở thẻ "a" hoặc submit "nút" tag, tại "hình thức", v.v., bạn nên sử dụng:

ClickEventHandler(event){ 
    event = event || window.event; 
    event.preventDefault(); 
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true; 
} 

Đối với các loại sự kiện khác không liên quan đến hành động trình duyệt mặc định. Bạn phải sử dụng event.stopPropagation(). Nó hoạt động với cả hai loại sự kiện.