it-roy-ru.com

Предотвращение перетаскивания изображения или выбора без использования JS

Кто-нибудь знает способ сделать изображение не перетаскиваемым и недоступным для выбора - одновременно - в 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 работает как положено. Об этом нет ничего в Interwebs ... Было бы здорово, если бы мы могли пролить свет на это вместе. 

Спасибо!!

Правка: Речь идет о предотвращении непреднамеренного перетаскивания элементов пользовательского интерфейса и улучшении удобства использования - не какая-то неудачная попытка схемы защиты от копирования :-)

106
tmkly3

Установите следующие свойства CSS для изображения:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
162
Jeff Wooden

Я забыл поделиться своим решением, я не мог найти способ сделать это без использования JS. В некоторых случаях @Jeffery A Wooden предлагает CSS просто не прикрывать. 

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

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

Это было намного сложнее, чем нужно.

54
tmkly3

Вы можете использовать свойство pointer-events в вашем CSS и установить его равным 'none'

img {
    pointer-events: none;
}

Отредактировано

это заблокирует (щелкнет) событие. Так что лучшим решением будет

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
31
Linh Dam

В зависимости от ситуации, часто полезно сделать изображение фоновым изображением div с CSS.

<div id='my-image'></div>

Тогда в CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Смотрите это JSFiddle для живого примера с кнопкой и другой опцией размеров.

12
Nick Merrill

Вы могли бы просто прибегнуть к

<img src="..." style="pointer-events: none;">
9
Thomas Bachem

Вы можете установить изображение в качестве фонового изображения. Поскольку он находится в div, а div не стирается, изображение будет не стираемым:

<div style="background-image: url("image.jpg");">
</div>
1
joshua pogi 28

Универсальное решение, особенно для браузера Windows Edge (как -ms-user-select: none; правило CSS не работает):

window.ondragstart = function () {return false}

Примечание. Это избавит вас от необходимости добавлять draggable = false к каждому тегу img, когда вам все еще нужно событие click (т.е. вы не можете использовать pointer-events = none), но не хотите, чтобы изображение значка перетаскивания появлялось.

0
Philip Murphy

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

0
User