Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

297

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:

  • Event.preventDefault()
  • Event.stopPropagation()
  • Event.stopImmediatePropagation()

Tóm tắt

Đầu tiên hãy xem tóm tắt tại MDN nhé 😄

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

Event.preventDefault

Hãy nhìn vào mãi ví dụ ở dưới. 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ý. Event.preventDefault là cách hoàn hảo để không cho gửi form khi nhấn vào button submit.

 

 

Event.preventDefault sẽ đảm bảo 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ì chúng ta đã làm.

Event.stopPropagation

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

 

 

Bây giờ nếu bạn click link và trước đó đã mở console bạn sẽ thấy:

 

Bây giờ hãy thêm Event.stopPropagation:

 

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

 

Event.stopImmediatePropagation

Với 2 methods ở trên đã giúp bạn khoảng 90% các trường hợp cần 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é 😄.

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

 

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

 

Bây giờ hãy hãy xem có gì ở console khi click nhé.

 

Vấn đề ở đây là .item và .element được xếp đồng hạng trên DOM. Nó không lan tràn lên phần tử trên như ví dụ trước đó. Và vì khi click cả 2 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à cơ hội để xử dụng stopImmediatePropagation!

 

Điêu quan trọng ở đây để ngăn chặn sự lan rộng tới cùng hạng của event trong DOM là đặt stopImmediatePropagation ở ngay khai báo lệnh đầu tiên về action lắng nghe event 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 chúng ta đây:

TopDev via Viblo

SHARE