Khi bạn chạm vào một phần tử HTML trong Safari trên iPad, nó sẽ chuyển sang màu xám. Logic là gì để quyết định phần tử nào giữa các phần tử lồng nhau được hiển thị bằng màu xám?

Question

Khi bạn chạm vào một yếu tố, chẳng hạn như hộp chỉnh sửa, trong một trang web trên iPad, nó sẽ chuyển sang màu xám khi bạn đang chạm vào nó.

Tôi có một bảng được bao quanh bởi một div nổi. Thay vì một phần tử dữ liệu riêng lẻ hoặc hàng chuyển sang màu xám, toàn bộ bảng (hoặc div gói của nó) chuyển sang màu xám khi một phần tử dữ liệu được chạm vào. (Chức năng của bảng này là một cửa sổ bật lên tự động hoàn tất)

Ở những nơi khác trong trang web, tôi có bảng trong đó chỉ phần tử dữ liệu cảm động chuyển sang màu xám.

Tôi tự hỏi liệu có ai có thể hướng dẫn tôi giải thích về logic đằng sau màu xám này khi chạm vào, để chúng tôi có thể mã hóa bảng của mình để đưa ra hành vi mong muốn. Lý tưởng nhất, chúng tôi muốn hàng để làm nổi bật khi nó được chạm vào.

Trong trường hợp khác, nếu chúng ta có thể tắt hành vi màu xám này, đó sẽ là một tùy chọn khác. Sau đó chúng tôi có thể tự viết mã cho bản thân. Có cách nào để tắt hành vi này cho các phần tử html cụ thể không?

Cảm ơn.

Answer 1

This author gợi ý một giải pháp để loại bỏ các nổi bật:

Nếu vì bất cứ lý do bạn không muốn có một số yếu tố của trang web của bạn hoặc ứng dụng được đánh dấu, chỉ cần thêm quy tắc CSS sau vào phần tử tương ứng .

-webkit-tap-highlight-color: rgba(0,0,0,0); 

Nó sẽ không vô hiệu hóa nổi bật, nhưng nó sẽ làm cho nó vô hình (một opacity của zero).

Tôi chưa thử nghiệm điều này.

Answer 2

Thử tạo kiểu div cho trình bao bọc bằng lựa chọn: none;

Điều đó sẽ tắt và sau đó bạn có thể viết mã đánh dấu trên tiêu điểm chính mình.

Hầu hết các trình duyệt đều thực sự làm điều này, nhưng nó đáng chú ý hơn một chút trên iPad và các sản phẩm cảm ứng khác của Apple. Nó thực sự cho mục đích khả năng sử dụng, vì vậy tôi sẽ chỉ khuyên bạn nên vô hiệu hóa nó nếu nó đang gây ra vấn đề như một trong những bạn đã đề cập. Nó phục vụ để giúp người dùng biết những gì họ đang nhấp vào, và cung cấp cho họ một cơ hội để di chuyển ngón tay của họ đi nếu họ đang ở trên điều sai trái.

Answer 3

Tôi đã phát hiện ra điều gì đó về "logic" đằng sau hành vi màu xám. Dường như các yếu tố có trình xử lý như onclick, onmousedown, vv thể hiện hành vi và những người không có trình xử lý như vậy thì không. Cách giải quyết A (hơi tẻ nhạt) đối với chúng tôi là thay đổi mã của tính năng tự động hoàn thành để mỗi hàng có trình xử lý tự động onmousedown của nó chứ không phải gói div đang xử lý việc này.