Trình duyệt đôi khi bỏ qua một sự kiện nhấp chuột jQuery trong quá trình chuyển đổi CSS3

Question

Khi phần tử chứa phần tử khác đang được hoạt ảnh qua CSS transition, các sự kiện nhấp đôi khi không được kích hoạt.

Kiểm tra trường hợp: http://codepen.io/anon/pen/gbosy

Tôi có một bố trí nơi một loạt các hình ảnh có chú thích được tiết lộ trên di chuột. Khi nhấp, chúng sẽ kích hoạt .slideDown của phần tử liền kề. Bản thân họ có thể được người dùng nhấp nhanh chóng. Vấn đề thậm chí còn đáng chú ý hơn trên một trang web trực tiếp so với trong codepen.

Trong bảng mã, khoảng 90% số nhấp chuột của tôi đang được tuân theo, trong khi khi quá trình chuyển đổi CSS bị tắt, 100% được tuân theo.

Mọi đề xuất đều được hoan nghênh.

Tôi nên lưu ý rằng vấn đề là dễ nhất để nhân rộng trong Chrome, vì nó ít phổ biến hơn trong Safari và ít phổ biến hơn đáng kể trong Firefox.

Answer 1

Tôi nghĩ rằng chìa khóa được vô hiệu hóa các sự kiện chuột trong các yếu tố p:

p { 
    pointer-events: none; 
} 

các vấn đề phát sinh bởi vì các nhấp chuột được tạo ra từ một mousedown + a mouseup, và nếu bạn làm điều đó trong các cạnh của chuyển đổi mousedown là trong một phần tử và mouseup trong một phần tử khác (và điều đó không tạo ra nhấp chuột).

Cách khác xung quanh (không thực sự giống nhau, nhưng hầu hết người dùng sẽ không nhận thấy điều đó) đang thực hiện việc đó trong mousedown thay vì nhấp vào