CSS - Sự kiện con trỏ: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của các sự kiện con trỏ trong CSS. Đừng lo lắng nếu bạn mới làm quen với điều này - tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm cho hàng trăm học viên trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc đồ uống yêu thích của bạn) và cùng bắt đầu nhé!

什么是 Pointer Events?

Trước khi chúng ta đi vào chi tiết, hãy nói về sự kiện con trỏ thực sự là gì. Hãy tưởng tượng bạn đang ở bảo tàng, và bên cạnh một bức tranh đẹp có một biển báo "Không được chạm". Biển báo đó giống như một sự kiện con trỏ trong CSS - nó kiểm soát cách bạn tương tác với các phần tử trên trang web.

Trong CSS, thuộc tính pointer-events cho phép chúng ta kiểm soát cách các phần tử HTML phản hồi với các sự kiện chuột/chạm. Đó giống như tặng siêu năng lực cho các phần tử trang web của bạn!

Cú pháp của Sự kiện Con trỏ

Hãy bắt đầu với cú pháp cơ bản:

selector {
pointer-events: value;
}

Đơn giản phải không? Bây giờ, hãy nhìn vào các giá trị có thể sử dụng.

Các giá trị có thể sử dụng cho Sự kiện Con trỏ

Dưới đây là bảng các giá trị có thể sử dụng cho thuộc tính pointer-events:

Giá trị	Mô tả
auto	Phần tử hành xử như bình thường nếu thuộc tính không được chỉ định
none	Phần tử không bao giờ là mục tiêu của sự kiện con trỏ
visiblePainted	Chỉ SVG. Phần tử chỉ có thể là mục tiêu của sự kiện con trỏ khi thuộc tính.visibility được đặt thành visible và khi con trỏ chuột ở trên một khu vực "đã vẽ"
visibleFill	Chỉ SVG. Phần tử có thể là mục tiêu của sự kiện con trỏ khi thuộc tính.visibility được đặt thành visible và khi con trỏ chuột ở trên phần bên trong của phần tử
visibleStroke	Chỉ SVG. Phần tử có thể là mục tiêu của sự kiện con trỏ khi thuộc tính.visibility được đặt thành visible và khi con trỏ chuột ở trên mép của phần tử
visible	Chỉ SVG. Phần tử có thể là mục tiêu của sự kiện con trỏ khi thuộc tính.visibility được đặt thành visible
painted	Chỉ SVG. Phần tử chỉ có thể là mục tiêu của sự kiện con trỏ khi con trỏ chuột ở trên một khu vực "đã vẽ"
fill	Chỉ SVG. Phần tử chỉ có thể là mục tiêu của sự kiện con trỏ khi con trỏ chuột ở trên phần bên trong của phần tử
stroke	Chỉ SVG. Phần tử chỉ có thể là mục tiêu của sự kiện con trỏ khi con trỏ chuột ở trên mép của phần tử
all	Chỉ SVG. Phần tử có thể là mục tiêu của sự kiện con trỏ khi con trỏ chuột ở trên phần bên trong hoặc mép của phần tử

Đừng lo lắng nếu một số giá trị này có vẻ khó hiểu - chúng ta sẽ tập trung vào các giá trị phổ biến nhất được sử dụng trong các phần tử HTML thông thường.

Áp dụng Sự kiện Con trỏ

Thuộc tính pointer-events có thể được áp dụng cho hầu hết các phần tử HTML. Nó đặc biệt hữu ích cho việc kiểm soát tương tác với hình ảnh, liên kết và các phần tử nhấp khác.

Giá trị pointer-events: none

Hãy bắt đầu với một trường hợp phổ biến. Hãy tưởng tượng bạn có một nút mà bạn muốn tạm thời vô hiệu hóa:

<button id="myButton">Nhấp vào tôi!</button>

#myButton {
pointer-events: none;
opacity: 0.5;
}

Trong ví dụ này, chúng ta đã đặt pointer-events: none trên nút. Điều này có nghĩa là nút sẽ không phản hồi với bất kỳ sự kiện chuột nào - nó giống như đặt một lá chắn vô hình lên nó. Chúng ta cũng đã giảm độ trong suốt để cung cấp một gợi ý thị giác rằng nó đã bị vô hiệu hóa.

Giá trị pointer-events: auto

Bây giờ, hãy tưởng tượng chúng ta muốn kích hoạt lại nút:

#myButton {
pointer-events: auto;
opacity: 1;
}

Bằng cách đặt pointer-events: auto, chúng ta đang告诉 trình duyệt xử lý các sự kiện con trỏ trên phần tử này như bình thường. Nó giống như loại bỏ lá chắn vô hình.

Vô hiệu hóa Sự kiện Con trỏ trên Hình ảnh

Đây là một mẹo nhỏ mà tôi thích giới thiệu cho học sinh của mình. Đôi khi, bạn có thể muốn làm một hình ảnh "nhấp qua" - có nghĩa là bạn có thể nhấp vào các phần tử ở phía sau nó. Dưới đây là cách bạn có thể làm điều đó:

<div class="container">
<img src="cute-cat.jpg" alt="Một chú mèo dễ thương" class="overlay-image">
<button>Nhấp vào tôi!</button>
</div>

.container {
position: relative;
}

.overlay-image {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

Trong ví dụ này, chúng ta có một hình ảnh che kín một nút. Bằng cách đặt pointer-events: none trên hình ảnh, chúng ta cho phép các nhấp chuột "qua" hình ảnh để nhấp vào nút ở phía dưới.

Các điểm cần nhớ

1. Thuộc tính pointer-events không chỉ ảnh hưởng đến các sự kiện chuột - nó cũng ảnh hưởng đến các sự kiện chạm trên thiết bị di động.
2. Sử dụng pointer-events: none không làm cho phần tử biến mất - nó chỉ làm cho nó không tương tác.
3. Hãy cẩn thận khi sử dụng pointer-events: none trên các phần tử điều hướng quan trọng, vì nó có thể ảnh hưởng đến khả năng tiếp cận.

Kết luận

Và thế là chúng ta đã cùng nhau khám phá thế giới của các sự kiện con trỏ trong CSS. Nhớ rằng, như bất kỳ công cụ mạnh mẽ nào khác, hãy sử dụng nó một cách khôn ngoan. Trong những năm dạy học của mình, tôi đã thấy học sinh tạo ra những trải nghiệm tương tác tuyệt vời sử dụng thuộc tính này.

Thực hành với các ví dụ này, thử nghiệm và đừng害怕犯错误 - đó là cách chúng ta học! Trước khi bạn biết điều đó, bạn sẽ kiểm soát các sự kiện con trỏ như một chuyên gia, tạo ra các trang web động và tương tác làm hài lòng người dùng của bạn.

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Hẹn gặp lại các bạn vào lần tới, chúc các bạn may mắn trong việc thiết kế!

Credits: Image by storyset