La prévention d'une image de l'être déplaçable ou sélectionnable sans utiliser de JS
N'quelqu'un connais un moyen de faire une image non déplaçable et non sélectionnable -- à la même heure, dans Firefox, sans avoir recours à du Javascript? L'air de rien, mais voici la question:
1) Peut être déplacé et mis en évidence dans Firefox:
<img src="...">
2) Si nous ajoutons à cela, mais l'image peut encore être mis en évidence tout en faisant glisser:
<img src="..." draggable="false">
3) Si nous ajoutons à cela, pour fixer la mise en évidence de problème, mais ensuite, contre toute attente intuitive, l'image devient déplaçable à nouveau. Bizarre, je sais! À l'aide de FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
Donc, personne ne sait pourquoi l'ajout de "-moz-user-select: none", serait en quelque sorte la trompette et désactiver "draggable=false"? Bien sûr, webkit fonctionne comme prévu. Rien n'est sur les Interwebs à ce sujet...Ce serait génial si on pouvait briller un peu de lumière sur cet ensemble.
Merci!!
Edit: C'est au sujet de garder les éléments de l'INTERFACE utilisateur d'être glissé par inadvertance et l'amélioration de la convivialité - et non pas une tentative boiteuse à une copie du projet de protection 🙂
- J'espère que vous ne pensez pas que cela va empêcher les gens de l'enregistrement de votre image sur le disque. N'importe qui avec même une légère compréhension de la manière dont les navigateurs de travail sera en mesure de se déplacer facilement.
- bien sûr que non, désolé, j'aurais dû être plus précise, j'essaie de la garder certains de mes éléments de l'INTERFACE utilisateur de se déplacer sur, dans le bon contexte, c'est nuire à la facilité d'utilisation.
- Très utiles si vous avez des éléments d'arrière-plan sera déplacé sur le bureau (ou pire qu'href lignes de code dans un fichier ouvert en arrière-plan de la fenêtre du navigateur tout en travaillant sur elle!) quand ils sont à proximité de la très petite moderne barres de défilement et vous n'avez pas frappé la barre exactement chaque test temps défile.
- Cela a été un problème connu dans Firefox pour longtemps il s'avère que (double?)
Vous devez vous connecter pour publier un commentaire.
Définir les propriétés CSS suivantes à l'image:
draggable
attribut/bien. Il est, après tout, que le spécification HTML définit comme ce qui contrôle si un élément est déplaçable. (par exemple, HTML:draggable="false"
JS:element.setAttribute('draggable',false);
, ouelement.draggable = false;
)user-drag
ne fonctionne que dans Safari. si vous ajoutezdraggable="false"
à la balise d'image, il arrêtera d'être déplaçable.J'ai oublier de partager ma solution, je ne pouvais pas trouver un moyen de le faire sans l'aide de JS. Il y a quelques cas particuliers où @Jeffery en Bois suggéré CSS simplement pas couvrir.
C'est ce que j'applique à l'ensemble de mes conteneurs de l'IU, pas besoin de s'appliquer à chaque élément car il recuses sur tous les éléments enfants.
CSS:
JS:
C'était bien plus compliqué que nécessaire.
<img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">
pour correspondre à l'OP du code.Vous pouvez utiliser le
pointer-events
propriété dans votre CSS, et définissez égal à 'none'Édité
cela va bloquer (clic) de l'événement. Donc, la meilleure solution serait
Selon la situation, il est souvent utile de faire de l'image une image d'arrière-plan d'un
div
avec les CSS.Ensuite dans le CSS:
Voir ce JSFiddle pour un exemple vivant avec un bouton et une autre option de dimensionnement.
Vous pourriez probablement juste de recourir à
Vous pouvez définir l'image comme image d'arrière-plan. Puisqu'il réside dans un
div
, et ladiv
est undraggable, l'image sera undraggable:Une solution générique spécialement pour Windows Bord du navigateur (comme l'-ms-user-select: none; règle CSS ne fonctionne pas):
fenêtre.ondragstart = function() {return false}
Remarque: Cela peut vous éviter d'avoir à ajouter draggable=false pour chaque balise img, quand vous avez encore besoin de l'événement click (c'est à dire que vous ne pouvez pas utiliser de pointeur événements=none), mais ne veulent pas la faire glisser l'image de l'icône apparaisse.
J'ai créé un div élément qui a la même taille que l'image et est positionné en haut de l'image. Ensuite, les événements de la souris ne vont pas à l'image de l'élément.