В любом случае, чтобы предотвратить синюю подсветку элементов в Chrome при быстром нажатии?

В большинстве случаев я не беспокоюсь об этом, но у меня есть карусель изображений, и если я быстро нажму на следующий и предыдущий div, они будут выделены в Chrome.

Я пробовал использовать схему: нет, но без эффекта. Есть ли какие-нибудь решения?

В дополнение к ссылке, предоставленной Floremin , которая очищает выделение текста с помощью JavaScript, чтобы «очистить» выделение, вы также можете использовать чистый CSS для этого. CSS здесь ...

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

Просто добавьте class="noSelect"атрибут к элементу, к которому вы хотите применить этот класс. Я настоятельно рекомендую попробовать это решение CSS. Нет ничего плохого в использовании JavaScript, я просто считаю, что это потенциально может быть проще, и немного поправим ваш код.

Для Chrome на Android -webkit-tap-highlight-color: transparent; есть дополнительное правило, с которым вы можете поэкспериментировать для поддержки в Android.

Для Chrome на Android вы можете использовать свойство CSS -webkit-tap-highlight-color :

-webkit-tap-highlight-color - нестандартное свойство CSS, которое устанавливает цвет выделения, которое появляется над ссылкой при нажатии. Выделение указывает пользователю, что его нажатие успешно распознается, и указывает, на какой элемент он нажимает.

Чтобы полностью удалить выделение, вы можете установить значение transparent:

-webkit-tap-highlight-color: transparent;

Имейте в виду, что это может повлиять на доступность: см. Outlinenone.com

Я использую Chrome версии 60, и ни один из предыдущих ответов CSS не работал.

Я обнаружил, что Chrome добавлял синюю подсветку через outlineстиль. Добавление следующего CSS исправило это для меня:

:focus {
    outline: none !important;
}

Но иногда, даже при выключенном user-selectи touch-calloutвыключенном, cursor: pointer;может вызвать этот эффект, поэтому просто установите, cursor: default;и он будет работать.

Попробуйте создать обработчик для события выбора для этих элементов, и в обработчике вы можете снять выделение.

Взгляните на это:

Очистить выделение текста с помощью JavaScript

Это пример очистки выделения. Вам нужно только изменить его, чтобы он работал только с конкретным элементом, который вам нужен.

Для меня это работает лучше всего:

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