HTML에서 선택 방지

82

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

javascript html selection

— 탑
소스

166

의 독점적 변형은 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"));

— 팀 다운
소스

선택되지 않았지만 여전히 클립 보드에 복사됩니다 ( goo.gl/5P8uH 의 MDC 사양에 따라 )

— ithkuil

@ithkuil : 흥미 롭군요. 처럼 보이는이 -moz-none길을 가야하는 것입니다. 내 대답을 수정하겠습니다.

— Tim Down

Firefox 5에서는 -moz-noneFirebug에 의해 자동 완성되지 않는 것 같습니다 none. -moz-user-select: none(작동)

— Lekensteyn 2011 년

@Lekensteyn : 둘 다 선택을 방지하기 위해 작동하지만 개념적으로 차이가 있습니다 : developer.mozilla.org/en/CSS/-moz-user-select . 그러나 다음은 Firefox 5에서이를 백업하지 않는 것 같습니다. jsfiddle.net/vhwJ5/2 .

— Tim Down

나는 user-select텍스트 만 다루고 다른 종류의 요소는 없다고 확신 합니다

— oldboy

10

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

— 몰로 콜로 코
소스

"img"선택기를 사용할 수 있지만 "event.preventDefault ();"에주의하십시오. "mousedown"와 관련된 다른 이벤트 때문에 ... 당신의 페이지에 그들에 작동합니다

— molokoloco

5

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

— 케네 벡
소스

2

나를 괴롭혔던 점 은 마우스 다운 및 이동 핸들러 모두 에서 필요하다는 것입니다 .

— Matthew Schinckel 2012

4

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

— 잎
소스

감사합니다. 선택을 차단하는 적절한 방법에 대해 잠시 검색했습니다. 비활성화 된 값은 게시되지 않기 때문에 클릭시 차단했습니다 ..... haha

— thekevshow

1

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

— Michal Ciechan
소스