JS를 사용하지 않고 이미지를 드래그하거나 선택하지 못하도록 방지

누구나 자바 스크립트에 의존하지 않고 Firefox에서 이미지를 드래그 할 수없고 선택 할 수 없도록 만드는 방법을 알고 있습니까? 사소한 것처럼 보이지만 여기에 문제가 있습니다.

1) Firefox에서 끌어서 강조 표시 할 수 있습니다.

<img src="...">

2) 따라서 이것을 추가하지만 드래그하는 동안 이미지를 여전히 강조 표시 할 수 있습니다.

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

3) 따라서 강조 문제를 해결하기 위해 이것을 추가하지만 직관적으로 이미지를 다시 드래그 할 수있게됩니다. 이상하다, 알고있다! FF 16.0.1 사용

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

그렇다면 왜 "-moz-user-select : none"을 추가하면 "draggable = false"를 능가 할 수 없는지 아십니까? 물론 웹킷은 예상대로 작동합니다. Interwebs에는 이것에 대해 아무것도 없습니다 ... 우리가 이것에 대해 약간의 빛을 비추면 좋을 것입니다.

감사!!

편집 : 이것은 UI 요소가 실수로 드래그되는 것을 방지하고 사용성을 향상시키는 것입니다.

다음 CSS 속성을 이미지로 설정하십시오.

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

솔루션을 공유하는 것을 잊어 버렸습니다 .JS를 사용하지 않고이를 수행 할 수있는 방법을 찾을 수 없었습니다. @Jeffery A Wooden에서 제안한 CSS가 다루지 않는 코너 사례가 있습니다.

이것은 모든 UI 컨테이너에 적용되는 것으로 모든 하위 요소에서 반복되므로 각 요소에 적용 할 필요가 없습니다.

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

이것은 필요한 것보다 훨씬 복잡했습니다.

pointer-eventsCSS 에서 속성을 사용하고 '없음'과 동일하게 설정할 수 있습니다

img {
    pointer-events: none;
}

편집

이벤트를 차단 (클릭)합니다. 더 나은 해결책은

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

상황에 따라 이미지 div를 CSS가 있는 배경 이미지로 만드는 것이 종종 도움이됩니다 .

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

그런 다음 CSS에서 :

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

버튼과 크기 조정 옵션이 다른 라이브 예제는 이 JSFiddle 을 참조하십시오 .

당신은 아마

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

특히 Windows Edge 브라우저에 대한 일반적인 솔루션 (-ms-user-select : none, CSS 규칙이 작동하지 않음) :

window.ondragstart = function() {return false}

참고 : 이렇게 하면 클릭 이벤트가 계속 필요할 때 (예 :를 사용할 수 없음 ) draggable="false"모든 img태그 에 추가 pointer-events: none하지 않아도되지만 드래그 아이콘 이미지를 표시하지 않아도됩니다.

이미지를 배경 이미지로 설정할 수 있습니다. 그것은 이후에 상주 div하고,이 divundraggable이다 이미지 undraggable 것이다 :

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

이미지와 크기가 같고 이미지 위에 위치한 div 요소를 만들었습니다 . 그런 다음 마우스 이벤트는 이미지 요소로 이동하지 않습니다.