Как остановить выделение элемента div при двойном щелчке

93

У меня есть этот элемент div с фоновым изображением, и я хочу перестать выделять элемент div при двойном щелчке по нему. Есть ли для этого свойство CSS?

— Дэйв
источник

В каком браузере вы находитесь? В моем тестировании я не мог выделить весь div в Firefox 5, Chrome 12 или IE9.

— tw16

159

Приведенный ниже CSS не позволяет пользователям выбирать текст. Живой пример: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Чтобы настроить таргетинг IE9 вниз и Opera, unselectableвместо этого необходимо использовать атрибут html :

<div unselectable="on">Test Text</div>

— tw16
источник

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

— Дэйв

@dave: Я предположил, поскольку единственный раз, когда двойной щелчок вызывает выделение, это когда в нем есть текст, это то, что вы имели в виду. Нет необходимости голосовать против.

— tw16

1

Не работает в IE или Opera. Вам нужен unselectableатрибут. Между -o-user-selectпрочим, нет.

— Tim Down

примечание для пользователей SASS / SCSS: вы можете @include user-select(none);вместо использования сырого CSS

— hilnius

Как ни странно, из-за этого div становились перетаскиваемыми даже тогда draggable = false, когда , но только в Firefox.

— rovyko

53

Это работает для меня

html
{
  -webkit-tap-highlight-color:transparent;
}

— Ганс
источник

Это должен быть лучший ответ.

— JohnA10

11

Это будет актуально только для браузеров webkit, таких как Chrome и Safari, и, скорее всего, не будет работать ни в одной версии IE или Firefox.

— Саймон Ист

31

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

После большого количества онлайн-исследований я обнаружил, что исправить это очень просто. Нет необходимости в сложном CSS. Просто добавьте следующий CSS на свою веб-страницу, и все готово. Это работает как в ноутбуках, так и в мобильных экранах.

div { outline-style:none;}

ПРИМЕЧАНИЕ . Это работало в Chrome версии 44.0.2403.155 m. Кроме того, он поддерживается во всех основных современных браузерах, как описано по этому адресу: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style.

— Сунил
источник

8

Я не эксперт по CSS, но думаю, что вы можете использовать ответ tw16, если увеличите количество затронутых элементов. Например, это предотвращает выделение всего на моей странице, не влияя на другие виды интерактивности:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Эта первая строка любезно предоставлена Полом Айришем (через http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

— SterlingVix
источник

Никогда не используйте этот CSS, если у вас есть PWA на iOS 13, это полностью блокирует клавиатуру.

— Фер

2

Настройте таргетинг на все элементы div:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Нацелить все элементы:

::-moz-selection { background:transparent; }
::selection { background:transparent; }

— Джейсонлеонхард
источник

1

отключить выбор пользователя:

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

установить прозрачный фон для выбранного элемента:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

— Джин.
источник

3

Хотя этот фрагмент кода может решить вопрос, включение объяснения действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причины вашего предложения кода.

— msrd0

0

Если элемент является интерактивным, вы можете сделать его элементом кнопки.

— Medda86
источник