Dù sao để ngăn việc làm nổi bật Màu xanh của các phần tử trong Chrome khi nhấp nhanh?

Hầu hết thời gian tôi không lo lắng về điều đó nhưng tôi có một băng chuyền hình ảnh và nếu tôi nhanh chóng nhấp vào div tiếp theo và div trước đó, chúng sẽ được đánh dấu trong Chrome.

Tôi đã thử sử dụng phác thảo: không có nhưng không có tác dụng. Có giải pháp nào ngoài đó không?

Ngoài liên kết được cung cấp bởi Floremin , liên kết xóa lựa chọn văn bản bằng JavaScript để "xóa" lựa chọn, bạn cũng có thể sử dụng CSS thuần túy để thực hiện việc này. CSS ở đây ...

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Chỉ cần thêm class="noSelect"thuộc tính vào phần tử mà bạn muốn áp dụng lớp này. Tôi thực sự khuyên bạn nên dùng thử giải pháp CSS này. Không có gì sai khi sử dụng JavaScript, tôi chỉ tin rằng điều này có thể dễ dàng hơn và làm sạch mọi thứ một chút trong mã của bạn.

Đối với chrome trên android -webkit-tap-highlight-color: transparent; là một quy tắc bổ sung mà bạn có thể muốn thử nghiệm để được hỗ trợ trong Android.

Đối với Chrome trên Android, bạn có thể sử dụng thuộc tính CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color là thuộc tính CSS không chuẩn đặt màu của phần đánh dấu xuất hiện trên một liên kết khi nó được nhấn vào. Phần nổi bật cho người dùng biết rằng lần nhấn của họ đang được nhận dạng thành công và cho biết họ đang nhấn vào phần tử nào.

Để xóa hoàn toàn phần đánh dấu, bạn có thể đặt giá trị thành transparent:

-webkit-tap-highlight-color: transparent;

Lưu ý rằng điều này có thể gây ra hậu quả về khả năng truy cập: xem outlinenone.com

Tôi đang chạy Chrome phiên bản 60 và không có câu trả lời CSS nào trước đó hoạt động.

Tôi thấy rằng Chrome đã thêm phần đánh dấu màu xanh lam thông qua outlinekiểu. Việc thêm CSS sau đây đã sửa lỗi cho tôi:

:focus {
    outline: none !important;
}

Tuy nhiên, đôi khi, ngay cả với user-selectvà touch-callouttắt, cursor: pointer;có thể gây ra hiệu ứng này, vì vậy, chỉ cần thiết lập cursor: default;và nó sẽ hoạt động.

Hãy thử tạo một trình xử lý cho sự kiện được chọn trên các phần tử đó và trong trình xử lý, bạn có thể xóa lựa chọn.

Hãy xem này:

Xóa lựa chọn văn bản bằng JavaScript

Đó là một ví dụ về việc xóa lựa chọn. Bạn chỉ cần sửa đổi nó để chỉ hoạt động trên phần tử cụ thể mà bạn cần.

Điều này phù hợp nhất với tôi:

.noSelect:hover {
  background-color: white;
}