Sử dụng thuộc tính sự kiện con trỏ CSS, chúng tôi có thể kiểm soát xem có cho phép dùng chuột và chạm vào một phần tử hay không.
Cú pháp của thuộc tính sự kiện con trỏ CSS như sau -
pointer-events: auto|none;
Ở trên,
tự động là mặc định. Phần tử phản ứng với các sự kiện con trỏ, trong khi
không: Phần tử không phản ứng với các sự kiện con trỏ
Ví dụ
Các ví dụ sau minh họa thuộc tính sự kiện con trỏ CSS.
<!DOCTYPE html>
<html>
<head>
<style>
a {
margin: 10vh;
pointer-events: none;
}
a:last-of-type {
pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>No pointer event here</a>
<a href=#>Automatic pointer event here</a>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
select {
margin: 10vh;
pointer-events: none;
background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>No event here </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
