JS를 사용하지 않고 이미지를 끌거나 선택할 수 없도록 방지

JS를 사용하지 않고 이미지를 끌거나 선택할 수 없도록 방지

파이어폭스에서 자바스크립트에 의존하지 않고 이미지를 드래그할 수 없고 선택할 수 없도록 만드는 방법을 아는 사람이 있습니까?사소해 보이지만 여기 문제가 있습니다.

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

2. 이를 추가하지만 드래그하는 동안에도 이미지가 강조 표시될 수 있습니다.

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

그래서, 누가 왜 추가하는지 아는 사람?-moz-user-select: none, 어떻게든 트럼프를 하고 무력화시킬 겁니다draggable=false 물론 웹킷은 예상대로 작동합니다.인터넷에는 이 일에 대해 아무것도...함께 빛을 비추면 좋을 것 같습니다.

편집: 이것은 UI 요소가 의도치 않게 끌리는 것을 방지하고 사용성을 개선하는 것이지, 복사 방지 체계를 어설프게 시도하는 것은 아닙니다.

이미지에 다음 CSS 속성을 설정합니다.

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

사용할 수 있습니다.pointer-eventsCSS의 속성을 'none'으로 설정합니다.

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

해결책을 공유하는 것을 잊어버렸는데, 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' ); 
};

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

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

<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: 없음, CSS 규칙이 작동하지 않음):

window.ondragstart = function() {return false}

참고: 이를 통해 추가할 필요성을 절감할 수 있습니다.draggable="false"모든 사람들에게img클릭 이벤트가 여전히 필요할 때 태그를 지정합니다(즉, 사용할 수 없습니다).pointer-events: none), 그러나 드래그 아이콘 이미지가 나타나지 않도록 합니다.

거의 모든 최신 브라우저에서 작동해야 하는 4가지 부분으로 구성된 솔루션은 다음과 같습니다.

<img src="foobar.jpg" draggable="false" ondragstart="return false;">

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

선택/하이라이트를 허용하려면 CSS의 아래 4줄을 제거할 수 있습니다.

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

이미지를 배경 이미지로 설정할 수 있습니다.A에 거주하고 있기 때문에div, 그리고.div끌 수 없습니다. 이미지를 끌 수 없습니다.

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

당신은 단순히 추가해야 합니다.draggable당신의 것으로 돌립니다.img꼬리표를 매다

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

언급URL : https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js