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

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

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

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

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

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

마우스를 끌고 핸들러를 움직이기 시작할 때 이런 일이...

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()양방에down그리고.move브라우저가 텍스트를 선택하지 못하도록 하기 위한 이벤트입니다.

예를 들어(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에서 제안한 함수를 사용하면 자바스크립트 드래깅 라이브러리의 문제가 해결되었습니다.흠잡을 데 없이 효과가 있습니다.

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

나는 그것을 내 마우스 다운과 마우스 무브 사용자 지정 기능에서 호출했고, 인식한 직후에 올바른 요소를 클릭했습니다.만약 내가 그것을 단지 기능 위에 호출한다면 나는 문서를 클릭할 때 아무 것이나 죽일 뿐입니다.제 기능은 document.body에 이벤트로 등록되어 있습니다.

시도해 보십시오.

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

이것은 대부분의 브라우저에서 CSS를 사용하여 달성될 수 있습니다.unselectableIE에서 확장합니다.여기서 답변 보기:CSS를 사용하여 텍스트 선택 강조를 비활성화하는 방법?

자바스크립트를 사용하여 특정 요소에 대한 텍스트 선택을 차단해야 할 경우, 가장 간단한 방법은 userSelect style을 할당하는 것이었습니다.

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

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

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

이 코드를 어디 자바스크립트에 붙여넣기만 하면 됩니다.

document.onmousemove = function(evt){
 event.preventDefault();
}

방금 https://www.colorzilla.com/gradient-editor/ 에서 디버깅해서 콘솔에서 테스트해봤는데, 더 이상 원하지 않는 UI를 선택하지 않고...

저에게 잘 작동하는 것은 onselect start 이벤트가 실행되지 않는 한 마우스 이동 이벤트에서 Default를 방지하는 것입니다.

const handler = event => event.preventDefault();

document.onmousedown = () => document.addEventListener("mousemove", handler);
document.onmouseup = () => document.removeEventListener("mousemove", handler);
document.onselectstart = () => document.removeEventListener("mousemove", handler);

Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ, user-select: auto.

11년 후, 저는 이것이 누군가에게 도움이 되길 바랍니다!

언급URL : https://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag