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-eventsauto, 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ợp pointer-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 sang pointer-events: auto. Nếu không click event listener sẽ bị bỏ qua, element sẽ tuân theo pointer-events.

Tham khảo:

ngminhtrung 23-01-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

58 bài viết.
72 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
44 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 3 tháng trước
44 15
White
27 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 7 tháng trước
27 5
White
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 2 tháng trước
16 4
Bài viết liên quan
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
72 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!