Con trỏ

Trên các thiết bị không có màn hình cảm ứng, con trỏ là một cách thiết yếu để người dùng biết họ đang tương tác với nội dung nào. Bạn cũng có thể cung cấp các gợi ý hữu ích về cách tương tác với một phần tử hoặc cách chuyển động bằng chuột hoặc bàn di chuột sẽ ảnh hưởng đến trang web của bạn.

Con trỏ

Trình duyệt tự động xử lý một số trường hợp sử dụng phổ biến cho con trỏ.

Nếu bạn đang đọc nội dung này trên một thiết bị có con trỏ, hãy khám phá trang này. Có thể bạn chưa nhận thấy cách con trỏ thay đổi trước đây, nhưng hãy lưu ý đến các gợi ý mà con trỏ cung cấp. Khi con trỏ di chuyển lên văn bản, con trỏ sẽ thay đổi thành một con trỏ chọn văn bản dạng chữ I, cho thấy rằng bạn có thể chọn văn bản. Nếu bạn di chuột lên một đường liên kết, con trỏ sẽ thay đổi thành bàn tay chỉ bằng ngón trỏ, cho thấy rằng bạn có thể thực hiện một hành động. Mọi nơi khác sẽ có con trỏ mặc định, thường là một mũi tên.

Khi tạo nhiều trang web có tính tương tác cao hơn, bạn sẽ muốn tuỳ chỉnh con trỏ để người dùng có thể dễ dàng hiểu được các hoạt động tương tác.

Các trình duyệt hỗ trợ một loạt từ khoá cho thuộc tính con trỏ, cung cấp gợi ý cho thao tác kéo, đổi kích thước, chọn và nhiều thao tác khác.

Nếu không có con trỏ nào được hỗ trợ truyền đạt các hoạt động tương tác của một phần tử, bạn cũng có thể cung cấp hình ảnh SVG hoặc PNG để dùng làm con trỏ.

Dấu mũ

Dấu nháy chèn được dùng để cho biết vị trí của bạn trong văn bản có thể chỉnh sửa. Thao tác này khác với con trỏ vì không đi theo chuột. Bạn có thể thay đổi màu bằng caret-color.

Phản hồi thao tác nhập bằng con trỏ của người dùng

Người dùng sử dụng chuột hoặc bàn di chuột có thể tương tác với một điểm chính xác hơn trên màn hình so với người dùng sử dụng màn hình cảm ứng. Nếu bạn chỉ thiết kế cho độ chính xác của chuột, thì những người dùng có màn hình cảm ứng hoặc gặp vấn đề về khả năng kiểm soát vận động tinh có thể không tương tác được với trang của bạn theo nhu cầu.

Các vấn đề thường gặp bao gồm nút quá nhỏ hoặc các phần tử tương tác quá gần nhau. Điều này khiến người dùng khó tương tác với phần tử chính xác.

Đảm bảo các nút và mục tiêu tương tác khác của bạn có kích thước đủ lớn là một bước quan trọng để đảm bảo trang web của bạn dễ tiếp cận. Bạn cũng có thể tuỳ chỉnh kiểu dựa trên độ chính xác của thiết bị đầu vào của người dùng bằng các truy vấn nội dung nghe nhìn pointer và any-pointer.

Tính năng nội dung nghe nhìn pointer đề cập đến thiết bị đầu vào chính của người dùng, trong khi any-pointer đề cập đến tất cả các thiết bị đầu vào. Bạn có thể ghép các thiết bị như chuột với fine và các thiết bị như màn hình cảm ứng với coarse. Giá trị none cho biết người dùng không sử dụng thiết bị đầu vào có con trỏ.

Sự kiện con trỏ và sự kiện chạm

Tắt một số cử chỉ trên màn hình cảm ứng

Khi bạn sử dụng màn hình cảm ứng, trình duyệt sẽ xử lý một số cử chỉ thường dùng. Ví dụ: khi bạn chạm vào màn hình bằng hai ngón tay rồi tách hai ngón tay ra, trang web thường sẽ phóng to. Mặc dù không bắt buộc phải triển khai những hành vi đó trên trang web của mình, nhưng bạn có thể muốn tắt hoặc ghi đè hành vi đó trong một số trường hợp.

Để chọn không cho phép trình duyệt xử lý một số thao tác, hãy liệt kê những thao tác mà bạn muốn phần tử xử lý. pan-x và pan-y cho phép cử chỉ di chuyển vùng phóng to bằng một ngón tay. Bạn có thể bật các chế độ này cùng với pinch-zoom để bật tính năng thu phóng và xoay bằng nhiều ngón tay.

Từ khoá manipulation tương đương với pan-x pan-y pinch-zoom. manipulation loại trừ các hành vi chạm khác yêu cầu nhiều lần chạm trong thời gian ngắn, chẳng hạn như nhấn đúp để thu phóng.

Sau khi tắt tính năng xử lý hành động của trình duyệt bằng cách loại trừ hành động đó khỏi touch-action, bạn có thể thiết lập các sự kiện con trỏ cho hành động đó.

Tắt tất cả sự kiện và hành động

Trong một số trường hợp, bạn có thể muốn chỉ định rằng một phần tử không có tính tương tác. Ví dụ: bằng cách đặt pointer-events: none trên một nút, bạn sẽ không thể nhấp vào nút đó hoặc thậm chí kích hoạt trạng thái di chuột.

Kiểm tra mức độ hiểu biết của bạn