Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
CSS pointer-events
CSS pointer-events
Ghi chú: Series Today I Learn trong vòng 100 ngày thử thách bản thân: ngày 01. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn nhất có thể). Mời cả nhà cũng tham gia. Tag đề nghị: #100daysTIL.
Một khi đã dùng SVG với D3.js, khả năng ta gặp thuộc tính CSS pointer-events
(events có s) rất cao. Thuộc tính này tác động đến hành vi của con trỏ chuột trên màn hình. Bài này giới thiệu về một vài chức năng của pointer-events
để khi gặp có thể hiểu cụ thể nó làm gì.
Thuộc tính pointer-events
của CSS hạn chế con trỏ chuột khỏi những thao tác:
- click chuột vào bất kỳ đối tượng nào
- không hiển thị icon mặc định (tùy thuộc vào trình duyệt)
- liên quan đến CSS hover
- không cho phép hàm JavaScript click (onlick) chạy
Các giá trị gắn với pointer-events
là auto
, none
, visiblePainted
, visibleFill
, visibleStroke
, visible
, painted
, fill
, stroke
, all
. Trừ 2 cái đầu, còn lại các giá trị kia đều chỉ áp dụng cho svg
.
Các giá trị hay thấy:
-
auto
: element tương ứng sẽ có hành vi giống như trường hợppointer-events
để trống. Nếu element đó là SVG, thì sẽ có hiệu ứng giống như khi đểpointer-events: visiblePainted
-
none
: element sẽ không chịu tác động bởi các event của chuột, ví dụ như click, hover, thay đổi trạng thái, và những thứ liên quan đến cursor icon.
Lưu ý:
- Nếu element con nếu được cài đặt
pointer-events
thì nó vẫn có thể có hành vi khác với element cha. - Nếu ta thêm click event listener vào 1 element, thì nên bỏ đi
pointer-events
, hoặc chuyển sangpointer-events: auto
. Nếu không click event listener sẽ bị bỏ qua, element sẽ tuân theopointer-events
.
Tham khảo:
ngminhtrung 23-01-2018





