Sự kiện con trỏ - Thủ thuật CSS

Các pointer-eventsbất động sản cho phép kiểm soát cách các phần tử HTML đáp ứng với chuột / cảm ứng sự kiện - bao gồm cả di chuột CSS / bang hoạt động, nhấp chuột / sự kiện tap trong Javascript, và có hoặc không phải là con trỏ có thể nhìn thấy.

.avoid-clicks ( pointer-events: none; )

Trong khi thuộc pointer-eventstính nhận mười một giá trị có thể, tất cả trừ ba giá trị trong số đó được dành riêng để sử dụng với SVG. Ba giá trị hợp lệ cho bất kỳ phần tử HTMl nào là:

none ngăn tất cả các tùy chọn nhấp chuột, trạng thái và con trỏ trên phần tử HTML được chỉ định
autokhôi phục chức năng mặc định (hữu ích để sử dụng trên các phần tử con của một phần tử pointer-events: none;được chỉ định
inheritsẽ sử dụng pointer-eventsgiá trị của phần tử gốc

Kiểm tra cây bút này!

Như đã trình bày ở trên, trường hợp sử dụng chính pointer-eventslà cho phép hành vi nhấp hoặc chạm để “đi qua” một phần tử đến một phần tử khác bên dưới nó trên trục Z. Ví dụ: điều này sẽ hữu ích cho các lớp phủ đồ họa hoặc ẩn các phần tử bằng opacity(ví dụ: chú giải công cụ) và vẫn cho phép lựa chọn văn bản trên nội dung bên dưới nó.

Điểm quan tâm

“Việc sử dụng sự kiện con trỏ trong CSS cho các phần tử không phải SVG là thử nghiệm. Tính năng này từng là một phần của đặc tả dự thảo giao diện người dùng CSS3 nhưng do nhiều vấn đề mở nên đã bị hoãn lại thành CSS4 ”. - Mozilla MDN
“Nếu bạn thêm trình xử lý sự kiện nhấp chuột vào một phần tử, sau đó xóa kiểu sự kiện con trỏ (hoặc thay đổi giá trị của nó thành tự động, sự kiện nhấp chuột sẽ kích hoạt chức năng được chỉ định. Về cơ bản, sự kiện nhấp chuột tôn trọng giá trị sự kiện con trỏ.” - David Walsh