커서 끌기로 텍스트 / 요소 선택을 방지하려면 어떻게해야합니까?

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

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

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

드래그 및 선택은 모두 마우스 다운 이벤트에서 초기화되고 후속 마우스 이동시 업데이트됩니다. 드래그를 시작하거나 마우스를 따라 가기 위해 이벤트를 처리 할 때 이벤트의 버블 링을 취소하고 기본 브라우저 반환을 재정의합니다.

마우스를 드래그하고 핸들러를 움직이기 시작할 때 이와 같은 것-

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

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

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

브라우저가 텍스트를 선택하지 못하도록하려면 및 이벤트 event.preventDefault()를 모두 호출해야 합니다.downmove

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

이것은 매우 오래된 게시물입니다. 그 상황에 정확히 대답하지 못할 수도 있지만 내 솔루션에 CSS를 사용합니다.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

댓글을 달고 싶었지만 평판이 충분하지 않습니다. @kennebec의 제안 된 기능을 사용하여 내 자바 스크립트 드래그 라이브러리의 문제를 해결했습니다. 그것은 flawlessy 작동합니다.

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에 이벤트로 등록되었습니다.

이 시도:

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

이것은 대부분의 브라우저에서 CSS를 사용 unselectable하고 IE 에서 expando를 사용하여 수행 할 수 있습니다 . 여기 내 대답을 참조하십시오 : CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법?

다음과 같이 선택하면 blur () 함수를 호출하여 간단히 방지 할 수 있습니다.

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

JavaScript를 사용하여 특정 요소에 대한 텍스트 선택을 차단해야하는 경우 가장 간단한 방법은 다음과 같이 userSelect 스타일을 할당하는 것입니다.

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