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

93

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

css xhtml tags highlighting double-click Дэйв
источник
В каком браузере вы находитесь? В моем тестировании я не мог выделить весь 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
источник