Cách sử dụng Thuộc tính con trỏ-sự kiện CSS

Cach Su Dung Thuoc Tinh Con Tro Su Kien Css



Trong khi phát triển một trang web, bạn có thể muốn hạn chế người xem thực hiện một số hành động (nhấp / di chuột) trên một số thành phần của trang web, chẳng hạn như hình ảnh hoặc siêu liên kết. Có thể có một số lý do; ví dụ: bạn không muốn người dùng nhấp vào liên kết vì nó là để cải thiện cấu trúc liên kết nội bộ của trang web hoặc để bảo vệ những gì bên trong liên kết. Trong các trường hợp như vậy, thuộc tính sự kiện con trỏ CSS có thể được sử dụng để nhận được kết quả cần thiết.

Trong phần viết này, chúng tôi sẽ trình bày chi tiết về cách sử dụng thuộc tính CSS pointer-event.

Thuộc tính con trỏ-sự kiện là gì?

CSS “ sự kiện con trỏ ”Thuộc tính chỉ định hành vi con trỏ / chạm đối với phần tử HTML và liệu phần tử đã chọn có phản hồi bằng cách thực hiện các hành động như di chuột hoặc nhấp hay không.







Làm thế nào để sử dụng Thuộc tính con trỏ-sự kiện?

Trong CSS, thuộc tính sự kiện con trỏ có thể được sử dụng để bật hoặc tắt các hành động của con trỏ trên một số phần tử HTML cụ thể. Cú pháp của thuộc tính sự kiện con trỏ được đưa ra bên dưới.



Cú pháp



sự kiện con trỏ : không ai | Tự động ;

Trong cú pháp được đề cập, “ Tự động 'Là giá trị mặc định của thuộc tính sự kiện con trỏ và nó cho phép hành động của con trỏ đối với một phần tử và' không ai ”Hoàn toàn đối lập với tự động; nó vô hiệu hóa hành động của con trỏ trên các phần tử HTML.





Hãy tiếp tục và lấy một ví dụ để hiểu thuộc tính sự kiện con trỏ.

ví dụ 1
Trong tệp HTML của chúng tôi, hãy chỉ định một thẻ liên kết với văn bản “ LinuxHint.io ”Và đặt nó trong phần cơ thể.



HTML

< một href = “https://www.linuxhint.io/” > LinuxHint.io < / một >

Bây giờ, chúng tôi sẽ sử dụng “ sự kiện con trỏ 'Thuộc tính và gán giá trị cho nó' không ai ”. Điều này sẽ vô hiệu hóa hành động con trỏ trên phần tử.

CSS

một {
sự kiện con trỏ : không ai ;
}

Lưu tệp HTML của bạn với mã đã đề cập và chạy nó bằng trình duyệt của bạn:

Hãy lấy một ví dụ khác để đề cập sâu hơn đến thuộc tính sự kiện con trỏ.

Ví dụ 2
Đặt giá trị thuộc tính sự kiện con trỏ thành “ Tự động ' thời gian này. Nó sẽ làm cho phần tử phản hồi qua con trỏ di chuột hoặc nhấp chuột. Tuy nhiên, tự động là giá trị mặc định của thuộc tính sự kiện con trỏ.

CSS

một {
sự kiện con trỏ : Tự động ;
}

Đầu ra

Chúng tôi đã đề cập đến các cách sử dụng khác nhau của thuộc tính sự kiện con trỏ CSS.

Sự kết luận

Để kiểm soát các hành động của con trỏ, chúng tôi có thể sử dụng CSS “ sự kiện con trỏ ' tài sản. Các ' Tự động ”Value là giá trị được xác định trước của thuộc tính này; nó cho phép các hành động trên các phần tử HTML. Khi thuộc tính sự kiện con trỏ được sử dụng với giá trị “ không ai ”, Nó vô hiệu hóa các hành động đối với một phần tử cụ thể. Bài viết này đã trình bày cách sử dụng thuộc tính sự kiện con trỏ CSS.