Kiểm soát sự kiện chuột & chạm với CSS pointer-events

Giới thiệu

Sử dụng thuộc tính pointer-events trong CSS, chúng ta có thể kiểm soát xem chuột và thao tác chạm có được phép trên một phần tử hay không.

Cú pháp

Cú pháp của thuộc tính pointer-events như sau:

pointer-events: auto|none;

Trong đó:

• auto (mặc định): Phần tử phản ứng với sự kiện con trỏ.
• none: Phần tử không phản ứng với sự kiện con trỏ.

Ví dụ 1: Vô hiệu hóa link

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: Vô hiệu hóa select

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: