커서 드래그로 텍스트/요소 선택을 방지하는 방법

Question

페이징 컨트롤을 만들었는데 버튼을 클릭하는 동안 실수로 개별 이미지와 텍스트를 쉽게 선택할 수 있다는 것을 알았습니다. 이것을 막을 수 있습니까?

명확히하기 위해 마우스로 강조 표시를 의미합니다. 화면의 한쪽에서 다른쪽으로 마우스를 드래그 해보십시오.

이 그리드에서 텍스트/컨트롤을 강조 표시하려고하면 선택할 수 없습니다. 어떻게 된거 야? Link

Answer 1

드래그 및 마우스 다운 이벤트에서 초기화 및 후속 마우스 동작에 대한 업데이트를 모두 선택하십시오. 당신은 기본 브라우저로 반환 드래그 시작하거나 마우스를 따라 이벤트의 버블 링을 취소하고 무시 이벤트를 처리 할 때 :이 같은

뭔가를 당신의 mousedown을 끌어 시작하고

e=e || window.event; 
pauseEvent(e); 

을 handlers- 이동

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

Answer 2

이 시도 :

이것은 대부분의 브라우저에서 CSS와 IE에서 unselectable의 expando를 사용하여 달성 할 수

document.onselectstart = function() 
{ 
    window.getSelection().removeAllRanges(); 
}; 

Answer 3

. 내 대답을 참조하십시오 : How to disable text selection highlighting using CSS?

Answer 4

저는 의견을 말하고 싶지만 충분한 명성이 없습니다. @kennebec에서 제안 된 기능을 사용하여 내 자바 스크립트 끌기 라이브러리에서 내 문제를 해결했습니다. 그것은 완벽하게 작동합니다.

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

내가 내가 올바른 요소를 클릭 인식 할 수 있습니다 직후, 내 mousedown과 MouseMove 이벤트 사용자 정의 함수를했다. 내가 함수의 맨 위에 그냥 호출하면 그냥 문서의 모든 클릭을 죽일. 내 함수가 document.body에 이벤트로 등록되었습니다.

Answer 5

끌기의 경우 mousedown 및 mousemove 이벤트를 캡처하고 있습니다. (그리고 희망 touchstart뿐만 아니라 touchmove 이벤트, 터치 인터페이스를 지원합니다.)

당신은 텍스트를 선택에서 브라우저를 유지하기 위해 모두 down 및 move 행사에 event.preventDefault()를 호출해야합니다.

<input Value="test" onSelect="blur();"> 

Answer 6

를 단순히 기능 흐림() 호출을 방지 JavaScript를 사용하면 가장 간단한 방법은 다음과 같이 userSelect 스타일을 지정하는 것입니다.

var myElement = document.createElement('div'); 
myElement.style.userSelect = 'none'; 

Answer 7

는 특정 요소의 텍스트 선택을 차단해야하는 경우

(예 jQuery를 사용하여) 다음과 같이 선택하면

var mouseDown = false; 
$(element).on('mousedown touchstart', function(event) { 
    event.preventDefault(); 
    mouseDown = true; 
}); 
$(element).on('mousemove touchmove', function(event) { 
    event.preventDefault(); 
    if(mouseDown) { 
    // Do something here. 
    } 
}); 
$(window.document).on('mouseup touchend', function(event) { 
    // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element. 
    mouseDown = false; 
});