Tất cả chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:

Bạn Đang Xem: Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

• Sự kiện.preventDefault()
• Sự kiện.stopPropagation()
• Sự kiện.stopImmediatePropagation()

Trước hết hãy xem tóm tắt tại MDN nhé

• preventDefault: Huỷ bỏ sự kiện nếu nó có thể huỷ mà không dừng sự lan rộng(propagation) của sự kiện tới phần khác.
• stopPropagation Ngăn chặn sự lan rộng của việc kiện ngày nay tới thằng khác.
• stopImmediatePropagation ngăn chặn những listeners cũng đang đang lắng tai cùng sự kiện được gọi.

Hãy nhìn vào mãi ví dụ ở dưới. Tất cả chúng ta sẽ thấy việc click vào submit button trên form sẽ gửi nội dung của form tới chỗ xử lý. Sự kiện.preventDefault là cách hoàn hảo để không cho gửi form khi nhấn vào button submit.

<form id=”myForm” action=”/my-handling-form-page” method=”post”> <divvàgt; <label for=”name”>Name:</labelvàgt; <input type=”text” id=”name” /> </divvàgt; <divvàgt; <label for=”mail”>E-mail:</labelvàgt; <input type=”email” id=”mail” /> </divvàgt; <divvàgt; <label for=”msg”>Message:</labelvàgt; <textarea id=”msg”></textareavàgt; </divvàgt; <div class=”button”> <button type=”submit”>Send your messagevàlt;/buttonvàgt; </divvàgt; </formvàgt; $(‘#myForm’).on(‘submit’, function(e) { e.preventDefault(); // Now nothing will happen });

Sự kiện.preventDefault sẽ đảm nói rằng form không bao giờ được gửi, và nó đã giành được quyền kiểm soát và ngăn chặn sự kiện đó khi click. Đó là những gì tất cả chúng ta đã làm.

stopPropagation để đảm bảo vững chắc rằng sự kiện không lan rộng nữa. Hãy xem ví dụ ở dưới:

<div class=”container”> <a href=”#” class=”element”>Click Me!</avàgt; </divvàgt; $(‘.container’).on(‘click’, function(e) { console.log(‘container was clicked’); }); $(‘.element’).on(‘click’, function(e) { e.preventDefault(); // Now link won’t go anywhere console.log(‘element was clicked’); });

Thời điểm này nếu như khách hàng click link và trước này đã mở console các bạn sẽ thấy:

Xem Thêm : Hủ nữ là gì? Top những dấu hiệu nhận biết hủ nữ chính xác 100%

“element was clicked” “container was clicked”

Thời điểm này hãy thêm Sự kiện.stopPropagation:

$(‘.container’).on(‘click’, function(e) { console.log(‘container was clicked’); }); $(‘.element’).on(‘click’, function(e) { e.preventDefault(); // Now link won’t go anywhere e.stopPropagation(); // Now the sự kiện won’t bubble up console.log(‘element was clicked’); });

Và click lại. Đây sẽ là cái bạn thấy:

“element was clicked”

Với 2 methods ở trên đã hỗ trợ bạn khoảng chừng 90% các trường hợp cấp thiết phải xử lí với events. Nhưng hãy tìm hiểu tiếp mothod cuối này nhé .

Tất cả chúng ta sẽ mở màn với markup tương tự ở trên, và thêm vào trong 1 class. Một chiếc là item mà tất cả những anchors sẽ nhận, và một chiếc riêng chỉ cho markup ở đây. Nó rất quan trọng để giúp code ví dụ này hoặt động.

<div class=”container”> <a href=”#” class=”item element”>Click Me!</avàgt; </divvàgt;

Và chúng sẽ thêm Sự kiện.stopPropagation mothod mà tất cả chúng ta đã tìm hiểu ở phần trước.

Xem Thêm : Gia Tăng Cơ Giới Là Gì – Gia Tăng Cơ Giới Là Sự Gia Tăng Dân Số Do:

$(‘.item’).on(‘click’, function(e) { console.log(‘an item was clicked’); }); $(‘.element’).on(‘click’, function(e) { e.preventDefault(); // Now link won’t go anywhere e.stopPropagation(); // Now the sự kiện won’t bubble up console.log(‘element was clicked’); });

Thời điểm này hãy hãy xem có gì ở console khi click nhé.

“an item was clicked” “element was clicked”

Vấn đề ở đây là .item và .element được xếp đồng hạng trên DOM. Nó không lan tràn lên thành phần trên như ví dụ trước đó. Và vì khi click cả hai action gắn trên .element và .item sẽ chạy cùng lúc, bạn không thể dừng lan rộng(propagation) như bạn mong muốn.

Đây đó chính là thời cơ để xử dụng stopImmediatePropagation!

$(‘.element’).on(‘click’, function(e) { e.preventDefault(); // Now link won’t go anywhere e.stopImmediatePropagation(); // Now item on click won’t fire console.log(‘element was clicked’); }); $(‘.item’).on(‘click’, function(e) { console.log(‘an item was clicked’); });

Điêu quan trọng ở đây để ngăn chặn sự lan rộng tới cùng hạng của sự kiện trong DOM là đặt stopImmediatePropagation ở ngay khai báo lệnh trước nhất về action lắng tai sự kiện click trong code của bạn. Như ở dây là chuyển các method từ .item lên .element.

Và thành của của tất cả chúng ta đây:

“element was clicked”

Bài tham khảo