Запобігання перетягуванню або вибору зображення без використання 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"? Звичайно, вебкіт працює як очікувалося. На Інтервебі немає нічого про це ... Було б чудово, якби ми могли разом просвітити це світло.

Дякую!!

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

Встановіть на зображення такі властивості CSS:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Я забув поділитися своїм рішенням, я не міг знайти спосіб це зробити без використання JS. Є деякі кутові випадки, коли CSS, запропонований @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;
}

JS:

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' ); 
};

Це було набагато складніше, ніж потрібно.

Ви можете використовувати 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;
}

Залежно від ситуації часто корисно зробити зображення фоновим зображенням divіз CSS.

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

Потім у CSS:

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

Дивіться цей JSFiddle для живого прикладу з кнопкою та іншим параметром розміру.

Можливо, ви могли просто вдатися

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

Загальне рішення, спеціально для браузера Windows Edge (як -ms-user-select: none; CSS правило не працює):

window.ondragstart = function() {return false}

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

Ви можете встановити зображення як фонове зображення. Оскільки воно знаходиться в a div, і divвоно неможливо змінити, зображення буде неможливим:

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

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