Кто-нибудь знает, как сделать изображение не перетаскиваемым и не выбираемым - в то же время - в Firefox, не прибегая к Javascript? Кажется тривиальным, но вот в чем проблема:
1) Можно перетащить и выделить в Firefox:
<img src="...">
2) Итак, мы добавляем это, но изображение все еще может быть выделено при перетаскивании:
<img src="..." draggable="false">
3) Итак, мы добавляем это, чтобы исправить проблему с выделением, но затем, как ни странно, изображение снова стало перетаскиваемым. Странно, я знаю! Использование FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
Итак, кто-нибудь знает, почему добавление «-moz-user-select: none» каким-то образом перевешивает и отключает «draggable = false»? Конечно, webkit работает должным образом. В сети нет ничего об этом ... Было бы здорово, если бы мы вместе пролили свет на это.
Спасибо!!
Изменить: речь идет о предотвращении непреднамеренного перетаскивания элементов пользовательского интерфейса и улучшении удобства использования, а не о какой-то неубедительной попытке схемы защиты от копирования :-)
Ответы:
Задайте для изображения следующие свойства CSS:
источник
Я забыл поделиться своим решением, я не мог найти способ сделать это без использования JS. Есть некоторые угловые случаи, когда CSS, предложенный @Jeffery A Wooden, просто не покрывает.
Это то, что я применяю ко всем моим контейнерам пользовательского интерфейса, нет необходимости применять к каждому элементу, поскольку он повторно используется для всех дочерних элементов.
CSS:
JS:
Это было намного сложнее, чем нужно.
источник
<img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">
для соответствия коду OP.Вы можете использовать
pointer-events
свойство в своем CSS и установить для него значение «none».Edited
это заблокирует (щелкнет) событие. Лучшее решение было бы
источник
В зависимости от ситуации часто бывает полезно сделать изображение фоновым изображением
div
с помощью CSS.Затем в CSS:
См. Этот JSFiddle для получения живого примера с кнопкой и другим параметром размера.
источник
Вы могли бы просто прибегнуть к
источник
Общее решение, особенно для браузера Windows Edge (как -ms-user-select: none; правило CSS не работает):
Примечание. Это может избавить вас от необходимости добавлять
draggable="false"
к каждомуimg
тегу, когда вам все еще нужно событие щелчка (то есть вы не можете использоватьpointer-events: none
), но не хотите, чтобы отображалось изображение значка перетаскивания.источник
Вы можете установить изображение в качестве фонового изображения. Поскольку он находится в a
div
, и егоdiv
нельзя будет перетаскивать, изображение будет недоступным для перетаскивания:источник
Я создал элемент div, который имеет тот же размер, что и изображение, и расположен поверх изображения . Тогда события мыши не попадают в элемент изображения.
источник