HTML에서 선택 금지

Question

HTML 페이지에 div가 있고 마우스를 움직여 이동할 때마다 커서가 "놓을 수 없음"커서가 표시되는 것처럼 보입니다. 선택을 해제하는 방법이 있습니까? CSS 사용자 선택을 시도해 보았지만 성공하지 못했습니다. user-select의

Answer 1

독점적 인 변화는 가장 현대적인 브라우저에서 작동합니다

이

*.unselectable { 
    -moz-user-select: -moz-none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 

    /* 
    Introduced in IE 10. 
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 
    */ 
    -ms-user-select: none; 
    user-select: none; 
} 

IE < (10)와 오페라를 들어, 당신이 선택할 수 없게하고자하는 요소의 unselectable 속성을 사용해야합니다. 당신은 HTML의 속성을 사용하여이 설정할 수 있습니다

<div id="foo" unselectable="on" class="unselectable">...</div> 

는 슬프게도이 속성이 상속되지 않습니다, 당신은 <div> 내부의 모든 요소의 시작 태그에 속성을 넣어야 할 것을 의미한다. 이 문제가 될 경우, 대신 요소의 후손 재귀 적으로이 작업을 수행하기 위해 자바 스크립트를 사용할 수 있습니다

function makeUnselectable(node) { 
    if (node.nodeType == 1) { 
     node.setAttribute("unselectable", "on"); 
    } 
    var child = node.firstChild; 
    while (child) { 
     makeUnselectable(child); 
     child = child.nextSibling; 
    } 
} 

makeUnselectable(document.getElementById("foo")); 

Answer 2

당신이 투명 이미지 당신의 선택의 어떤 종류를 가지고 있나요? 일반적으로 이미지를 드래그하면 "캔트 드롭"아이콘이 나타납니다. 그렇지 않으면 일반적으로 드래그 할 때 텍스트를 선택합니다. 그렇다면 z-index를 사용하여 모든 이미지 뒤에 이미지를 넣어야 할 수도 있습니다.

Answer 3

마우스 다운 및 이동 핸들러에서 cancelBubble=true 및 stopPropagation()을 사용합니다.

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla 

CSS :

* { 
    user-select: none; 
    -khtml-user-select: none; 
    -o-user-select: none; 
    -moz-user-select: -moz-none; 
    -webkit-user-select: none; 
} 

::selection { background: transparent;color:inherit; } 
::-moz-selection { background: transparent;color:inherit; } 

JS :

Answer 4

그것은 CSS는 사용자가 선택한 이미지 드래그를 방지하고 드롭하지 않습니다 ... 그래서 ..

HTML 것입니다

$(function(){ 
    $('*:[unselectable=on]').mousedown(function(event) { 
     event.preventDefault(); 
     return false; 
    }); 
}); 

Answer 5

event.preventDefault() 트릭 (IE7-9 및 Chrome에서 테스트 됨) :

jQuery('#slider').on('mousedown', function (e) { 
    var handler, doc = jQuery(document); 
    e.preventDefault(); 
    doc.on('mousemove', handler = function (e) { 
     e.preventDefault(); 
     // refresh your screen here 
    }); 
    doc.one('mouseup', function (e) { 
     doc.off('mousemove', handler); 
    }); 
});