Empêcher une image d’être déplaçable ou sélectionnable sans utiliser JS

Est-ce que quelqu’un connaît un moyen de rendre une image non déplaçable et non sélectionnable – en même temps – dans Firefox, sans avoir recours à Javascript? Semble banal, mais voici le problème:

1) Peut être déplacé et mis en évidence dans Firefox:

 

2) Nous ajoutons donc ceci, mais l’image peut toujours être mise en évidence en faisant glisser:

  

3) Nous ajoutons donc ceci, pour corriger le problème de surlignage, mais de manière contre-intuitive, l’image redevient déplaçable. Bizarre, je sais! Utiliser FF 16.0.1

  

Donc, est-ce que quelqu’un sait pourquoi l’ajout de “-moz-user-select: none” pourrait en quelque sorte effacer et désactiver “draggable = false”? Bien sûr, le webkit fonctionne comme prévu. Il n’ya rien sur les Interwebs à ce sujet… Ce serait formidable si nous pouvions faire la lumière ensemble.

Merci!!

Edit: Il s’agit d’empêcher que des éléments d’interface utilisateur soient déplacés par inadvertance et d’améliorer la facilité d’utilisation – pas une tentative boiteuse de protection contre la copie 🙂

Définissez les propriétés CSS suivantes sur l’image:

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

J’ai oublié de partager ma solution, je n’ai pas trouvé le moyen de le faire sans utiliser JS. Il y a quelques cas où le CSS suggéré par @Jeffery A Wooden ne couvre pas.

C’est ce que j’applique à tous mes conteneurs d’interface utilisateur, inutile de l’appliquer à chaque élément car il est utilisé sur tous les éléments enfants.

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

C'était beaucoup plus compliqué que nécessaire.

Vous pouvez utiliser la propriété pointer-events dans votre CSS et la définir à ‘none’

 img { pointer-events: none; } 

Édité

Cela bloquera (cliquez) l’événement. Donc, une meilleure solution serait

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

Selon la situation, il est souvent utile de faire de l’image une image d’arrière-plan d’une div avec CSS.

 

Puis en CSS:

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

Voir ce JSFiddle pour un exemple en direct avec un bouton et une option de dimensionnement différente.

Vous pourriez probablement avoir recours à

  

Vous pouvez définir l’image en tant qu’image d’arrière-plan. Comme il réside dans un div , et que le div est indissociable, l’image sera irrécupérable:

 

Une solution générique en particulier pour le navigateur Windows Edge (comme -ms-user-select: none; la règle CSS ne fonctionne pas):

window.ondragstart = function () {return false}

Remarque: Cela peut vous éviter d’append draggable = false à chaque balise img lorsque vous avez toujours besoin de l’événement click (c’est-à-dire que vous ne pouvez pas utiliser pointer-events = none),