it-swarm.com.de

Verhindern, dass ein Bild ohne JS gezogen oder ausgewählt werden kann

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

1) Kann in Firefox gezogen und hervorgehoben werden:

<img src="...">

2) Wir fügen dies hinzu, aber das Bild kann beim Ziehen trotzdem hervorgehoben werden:

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

3) Also fügen wir dies hinzu, um das Hervorhebungsproblem zu beheben, dann aber auf ungewollte Weise das Bild wird wieder ziehbar. Weird ich weiß! FF 16.0.1 verwenden

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

Weiß jemand, warum das Hinzufügen von "-moz-user-select: none" irgendwie trumpft und "draggable = false" deaktiviert? Natürlich funktioniert das Webkit wie erwartet. Es gibt nichts auf den Interwebs darüber ... Es wäre großartig, wenn wir das zusammen beleuchten könnten. 

Vielen Dank!!

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

106
tmkly3

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;
162
Jeff Wooden

Ich habe vergessen, meine Lösung mitzuteilen. Ich konnte keinen Weg finden, ohne JS zu verwenden. Es gibt einige Fälle, in denen @Jeffery A Woodens CSS vorgeschlagen wird. 

Dies ist, was ich auf alle meine UI-Container anwenden kann, nicht auf jedes Element anzuwenden, da es für alle untergeordneten Elemente verwendet wird.

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

Das war viel komplizierter als es sein musste.

54
tmkly3

Sie können die pointer-events-Eigenschaft in Ihrem CSS verwenden und gleich "none" setzen.

img {
    pointer-events: none;
}

bearbeitet

dies wird das Ereignis blockieren (klicken). Also eine bessere Lösung wäre

<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;
}
31
Linh Dam

Je nach Situation ist es oft hilfreich, das Bild als Hintergrundbild einer div mit CSS zu verwenden.

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

Dann in CSS:

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

In diesem JSFiddle finden Sie ein Live-Beispiel mit einem Button und einer anderen Größenoption.

12
Nick Merrill

Sie könnten wahrscheinlich nur zu sich greifen

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

Sie können das Bild als Hintergrundbild festlegen. Da es sich in einer div befindet und die div nicht anfällig ist, ist das Bild nicht anfällig:

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

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

window.ondragstart = function () {return false}

Hinweis: Auf diese Weise müssen Sie möglicherweise zu jedem img-Tag draggable = false hinzufügen, wenn Sie noch das click -Ereignis benötigen (d. H. Sie können keine pointer-events = none verwenden), aber das Drag-Symbol-Bild nicht anzeigen.

0
Philip Murphy

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

0
User