Verhindern, dass ein Bild ohne Verwendung von JS ziehbar oder auswählbar ist

Kennt jemand eine Möglichkeit, ein Bild in Firefox nicht ziehbar und gleichzeitig nicht auswählbar zu machen, ohne auf Javascript zurückzugreifen? Scheint trivial, aber hier ist das Problem:

1) Kann in Firefox gezogen und hervorgehoben werden:

<img src="...">

2) Also fügen wir dies hinzu, aber das Bild kann beim Ziehen immer noch hervorgehoben werden:

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

3) Also fügen wir dies hinzu, um das Hervorhebungsproblem zu beheben, aber dann wird das Bild nicht intuitiv wieder ziehbar. Seltsam, ich weiß! Verwenden von FF 16.0.1

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

Weiß jemand, warum das Hinzufügen von "-moz-user-select: none" "draggable = false" irgendwie übertrumpfen und deaktivieren würde? Natürlich funktioniert das Webkit wie erwartet. In den Interwebs gibt es darüber nichts ... Es wäre großartig, wenn wir gemeinsam etwas Licht ins Dunkel bringen könnten.

Vielen Dank!!

Bearbeiten: Hier geht es darum, zu verhindern, dass UI-Elemente versehentlich gezogen werden, und die Benutzerfreundlichkeit zu verbessern - kein lahmer Versuch eines Kopierschutzschemas :-)

Legen Sie die folgenden CSS-Eigenschaften für das Bild fest:

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

Ich habe vergessen, meine Lösung zu teilen. Ohne JS konnte ich keinen Weg finden, dies zu tun. Es gibt einige Eckfälle, in denen das von @Jeffery A Wooden vorgeschlagene CSS nicht behandelt wird.

Dies ist, was ich auf alle meine UI-Container anwende. Es muss nicht auf jedes Element angewendet werden, da es auf alle untergeordneten Elemente angewendet wird.

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

Das war viel komplizierter als es sein musste.

Sie können die pointer-eventsEigenschaft in Ihrem CSS verwenden und sie auf "keine" setzen.

img {
    pointer-events: none;
}

Bearbeitet

Dadurch wird das Ereignis blockiert (angeklickt). Eine bessere Lösung wäre also

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

Je nach Situation ist es oft hilfreich, das Bild als Hintergrundbild eines divmit CSS zu erstellen.

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

Dann in CSS:

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

In dieser JSFiddle finden Sie ein Live-Beispiel mit einer Schaltfläche und einer anderen Größenoption.

Sie könnten wahrscheinlich einfach darauf zurückgreifen

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

Eine generische Lösung speziell für Windows Edge-Browser (als -ms-user-select: keine; CSS-Regel funktioniert nicht):

window.ondragstart = function() {return false}

Hinweis: Dies erspart Ihnen das Hinzufügen draggable="false"zu jedem imgTag, wenn Sie das Klickereignis noch benötigen (dh nicht verwenden können pointer-events: none), aber nicht möchten, dass das Drag-Symbol angezeigt wird.

Sie können das Bild als Hintergrundbild festlegen. Da es sich in a divbefindet und das nicht divzerlegbar ist, ist das Bild nicht zerlegbar:

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

Ich habe ein div- Element erstellt, das dieselbe Größe wie das Bild hat und über dem Bild positioniert ist . Dann gehen die Mausereignisse nicht zum Bildelement.