JS kullanmadan bir görüntünün sürüklenebilir veya seçilebilir olmasını önleme

Firefox'ta bir resmi Javascript'e başvurmadan sürüklenemeyen ve aynı zamanda seçilemez hale getirmenin bir yolunu bilen var mı? Önemsiz görünüyor, ancak sorun şu:

1) Firefox'ta sürüklenebilir ve vurgulanabilir:

<img src="...">

2) Bu yüzden bunu ekliyoruz, ancak resim sürüklerken hala vurgulanabilir:

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

3) Bu yüzden vurgulama sorununu düzeltmek için bunu ekliyoruz, ancak daha sonra sezgiye aykırı olarak, görüntü tekrar sürüklenebilir hale geliyor. Garip, biliyorum! FF 16.0.1'i kullanma

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

Öyleyse, "-moz-user-select: none" eklemenin neden bir şekilde "draggable = false" seçeneğini gölgeleyip devre dışı bırakacağını bilen var mı? Tabii ki, webkit beklendiği gibi çalışıyor. Interwebs'de bununla ilgili hiçbir şey yok ... Bu konuya birlikte biraz ışık tutsak harika olur.

Teşekkürler!!

Düzenleme: Bu, kullanıcı arabirimi öğelerinin yanlışlıkla sürüklenmesini önlemek ve kullanılabilirliği artırmakla ilgilidir - bir kopya koruma şemasında bazı kötü girişimler değil :-)

Aşağıdaki CSS özelliklerini görüntüye ayarlayın:

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

Çözümümü paylaşmayı unutuyordum, JS kullanmadan bunu yapmanın bir yolunu bulamadım. @Jeffery A Wooden'in önerdiği CSS'nin kapatılmayacağı bazı köşe vakaları var.

Bu, tüm UI kapsayıcılarıma uyguladığım şeydir, tüm alt öğelerde yeniden kullanıldığından her öğeye başvurmaya gerek yoktur.

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

Bu, olması gerekenden çok daha karmaşıktı.

pointer-eventsÖzelliği CSS'nizde kullanabilir ve "yok" olarak ayarlayabilirsiniz.

img {
    pointer-events: none;
}

Düzenlenen

bu olay (tıklama) engelleyecektir. Daha iyi bir çözüm olurdu

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

Duruma bağlı olarak, görüntüyü divCSS ile bir arka plan görüntüsü yapmak genellikle yararlıdır .

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

Sonra CSS'de:

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

Bir düğme ve farklı bir boyutlandırma seçeneğiyle canlı bir örnek için bu JSFiddle'a bakın .

Muhtemelen başvurabilirsin

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

Özellikle Windows Edge tarayıcısı için genel bir çözüm (-ms-user-select olarak: yok; CSS kuralı çalışmıyor):

window.ondragstart = function() {return false}

Not: Bu , tıklama olayına hala ihtiyacınız olduğunda (yani kullanamadığınızda ), ancak sürükleme simgesi görüntüsünün görünmesini istemediğinizde sizi draggable="false"her imgetikete eklemek zorunda kalmadan kurtarabilir pointer-events: none.

Görüntüyü arka plan görüntüsü olarak ayarlayabilirsiniz. Bir içinde yer aldığından divve divparçalanamaz olduğundan, görüntü parçalanamaz olacaktır:

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

Görüntüyle aynı boyutta ve görüntünün üstüne yerleştirilmiş bir div öğesi oluşturdum . Daha sonra, fare olayları görüntü öğesine gitmez.