ProgramingTip

커서 끌기로 텍스트 / 요소 선택을 방지하는 방법

bestdevel 2020. 10. 31. 09:55
반응형

커서 끌기로 텍스트 / 요소 선택을 방지하는 방법


페이징 컨트롤을 유전자 재조합 버튼을 클릭하는 동안 실수로 식별 이미지와 텍스트를 선택하는 것입니다. 제출 방지 할 수 있습니까?

마우스로 강조 표시하는 것을 의미합니다. (화면의 한쪽에서 다른쪽으로 마우스를 드래그 해.)

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


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

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

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

드래그의 경우 mousedownmousemove이벤트를 배치 합니다. (그리고 희망 touchstarttouchmove지원 터치 인터페이스 아니라 이벤트,.)

브라우저가 텍스트를 선택하지 못하도록해야 할 일 이벤트 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;
});


충분하고 싶었습니다. @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에 이벤트로 등록되었습니다.


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

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

이 시도 :

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

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


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

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

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

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

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

반응형