Propagation Lan truyền sự kiện - quan1997ap/angular-app-note GitHub Wiki

1. Xảy ra khi

Lan truyền sự kiện xảy ra khi một sự kiện được kích hoạt trên một phần tử có một hoặc nhiều phần tử cha Bởi vì, các phần tử HTML cha con được xếp chồng (lồng vào nhau). Do đó, nếu bạn click vào phần tử bên trong cùng thì cũng tương đương click vào cả cụm cha con đó.

2. Nguyên tắc

image

  • 2.1. event.stopPropagation(): Khi click 1 thẻ, sẽ chặn việc sự kiện lan truyền lên các thẻ cha.
  • 2.2. stopImmediatePropagation(): Khi 1 thẻ được gán nhiều sự kiện click, sẽ chặn việc sự kiện lan truyền lên các thẻ cha đồng thời chỉ nhận 1 sự kiện duy nhất.
  • 2.3 preventDefault(): Chặn event mặc định của các thẻ như thẻ a.

3. Ứng dụng

image

Khi ta click button remove thì sẽ đồng thời gọi cả event khi click vào mỗi item. Để tránh vấn đề này thì sử dụng event.stopPropagation()