Tại sao sự kiện chuyển tiếp có thể chạy khi quá trình chuyển đổi của phần tử được kết thúc?

Question

Tôi đã ràng buộc sự kiện transitionend tới div1. Khi quá trình chuyển đổi của div1 kết thúc, sự kiện đã diễn ra. Không có vấn đề gì.

tôi gặp phải một trường hợp đặc biệt:

tôi đã thêm 3 đoạn để div1 này, khi quá trình chuyển đổi của mỗi đoạn văn được chấm dứt, transitionend kiện div1 's cũng chạy. Vì vậy, sự kiện transitionend đã chạy 4 lần. >. <

Trong transitionend cơ quan chức năng biết lắng nghe sự kiện của div1 's, tôi có thể thấy rằng event.target! == this. Tôi cảm thấy nó khá là lố bịch!

Cả Chrome và Firefox đều có vấn đề này. Vì vậy, tôi đoán đây không phải là lỗi triển khai HTML5 spec của trình duyệt.

Có ai có thể giải thích tại sao sự kiện transitionend của phần tử cũng có thể được kích hoạt bởi phần tử con của phần tử này không?

Cảm ơn bạn.

Answer 1

Điều này được gọi là bọt sự kiện. Nhiều sự kiện xảy ra trên một phần tử con, theo mặc định, bong bóng lên thông qua các bậc cha mẹ sau khi xử lý sự kiện được gọi trên đối tượng ban đầu. Bạn có thể phát hiện bọt khí như bạn đã nhận thấy bằng cách kiểm tra đối tượng event hoặc bạn có thể ngăn chặn bong bóng bằng cách dừng quá trình truyền khi bạn xử lý sự kiện trên đối tượng nguồn.

Dừng truyền là một trong những điều khác biệt trong IE so với các trình duyệt khác. Trong các trình duyệt khác, bạn gọi:

event.stopPropagation() 

trong IE trước khi IE9:

window.event.cancelBubble = true;