Mencegah gambar agar tidak dapat diseret atau dipilih tanpa menggunakan JS

Adakah yang tahu cara membuat gambar tidak bisa diseret dan tidak dapat dipilih - di saat bersamaan - di Firefox, tanpa menggunakan Javascript? Tampaknya sepele, tapi ini masalahnya:

1) Dapat diseret dan disorot di Firefox:

<img src="...">

2) Jadi kami menambahkan ini, tetapi gambar masih dapat disorot sambil menyeret:

<img src="..." draggable="false">

3) Jadi kami menambahkan ini, untuk memperbaiki masalah penyorotan, tetapi kemudian secara berlawanan, gambar menjadi dapat diseret lagi. Aneh, saya tahu! Menggunakan FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Jadi, apakah ada yang tahu mengapa menambahkan "-moz-user-select: none", entah bagaimana akan mengalahkan dan menonaktifkan "draggable = false"? Tentu saja, webkit berfungsi seperti yang diharapkan. Tidak ada yang ada di luar sana tentang Jalinan tentang ini ... Akan lebih bagus jika kita bisa menyinari hal ini bersama-sama.

Terima kasih!!

Sunting: Ini tentang menjaga agar elemen UI tidak terseret secara tidak sengaja dan meningkatkan kegunaan - bukan upaya timpang pada skema perlindungan salinan :-)

Setel properti CSS berikut ke gambar:

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

Saya lupa membagikan solusi saya, saya tidak dapat menemukan cara untuk melakukan ini tanpa menggunakan JS. Ada beberapa kasus sudut di mana @Jeffery A Wooden menyarankan CSS tidak akan mencakup.

Ini adalah apa yang saya terapkan pada semua wadah UI saya, tidak perlu diterapkan pada setiap elemen karena ia berhenti pada semua elemen anak.

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

Ini jauh lebih rumit daripada yang seharusnya.

Anda dapat menggunakan pointer-eventsproperti di CSS Anda, dan mengaturnya sama dengan 'tidak ada'

img {
    pointer-events: none;
}

Diedit

ini akan memblokir (klik) acara. Jadi solusi yang lebih baik

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

Bergantung pada situasinya, seringkali membantu untuk menjadikan gambar sebagai gambar latar belakang divdengan CSS.

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

Kemudian di CSS:

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

Lihat JSFiddle ini untuk contoh langsung dengan tombol dan opsi ukuran yang berbeda.

Anda mungkin bisa menggunakan

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

Solusi umum terutama untuk browser Windows Edge (sebagai -ms-user-select: none; aturan CSS tidak berfungsi):

window.ondragstart = function() {return false}

Catatan: Ini dapat menghemat Anda harus menambahkan draggable="false"ke setiap imgtag ketika Anda masih membutuhkan acara klik (yaitu Anda tidak dapat menggunakan pointer-events: none), tetapi tidak ingin gambar ikon seret muncul.

Anda dapat mengatur gambar sebagai gambar latar belakang. Karena berada di a div, dan divundraggable, gambar akan undraggable:

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

Saya membuat elemen div yang memiliki ukuran yang sama dengan gambar dan diposisikan di atas gambar . Kemudian, peristiwa mouse tidak pergi ke elemen gambar.