HTML에서 선택 방지

HTML에서 선택 방지

---

HTML 페이지에 div가 있고 마우스를 누르고 이동할 때마다 커서가 무언가를 선택하는 것처럼 "놓을 수 없습니다"라는 메시지가 표시됩니다. 선택을 비활성화하는 방법이 있습니까? 성공하지 않고 CSS 사용자 선택을 시도했습니다.

---

의 독점적 변형은 user-select대부분의 최신 브라우저에서 작동합니다.

*.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 및 Opera의 unselectable경우 선택 해제하려는 요소 의 속성 을 사용해야합니다 . HTML의 속성을 사용하여이를 설정할 수 있습니다.

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

슬프게도이 속성은 상속되지 않습니다. 즉, .NET 내부의 모든 요소의 시작 태그에 속성을 넣어야합니다 <div>. 이것이 문제인 경우 대신 JavaScript를 사용하여 요소의 하위 항목에 대해이 작업을 재귀 적으로 수행 할 수 있습니다.

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"));

---

CSS 사용자 선택이 이미지 드래그 앤 드롭을 방지하지 않는 것 같습니다. 그래서 ..

HTML :

<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 :

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

---

나는 마우스를 아래로 사용 cancelBubble=true하고 stopPropagation()핸들러를 이동합니다.

---

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

---

선택한 투명한 이미지가 있습니까? 일반적으로 이미지를 드래그 할 때 "cant drop"아이콘이 나타납니다. 그렇지 않으면 일반적으로 드래그 할 때 텍스트를 선택합니다. 그렇다면 Z- 색인을 사용하여 모든 이미지 뒤에 이미지를 넣어야 할 수도 있습니다.

참고 URL : https://stackoverflow.com/questions/2326004/prevent-selection-in-html