나는 페이징 컨트롤을 만들었고 버튼을 클릭하는 동안 실수로 개별 이미지와 텍스트를 선택하는 것이 매우 쉽다는 것을 알았습니다. 이것을 방지 할 수 있습니까?
선택을 명확히하기 위해 마우스로 강조 표시하는 것을 의미합니다. (화면의 한쪽에서 다른쪽으로 마우스를 드래그 해보십시오.)
이 그리드에서 텍스트 / 컨트롤을 강조 표시하려고하면 선택할 수 없습니다. 어떻게 된 거죠?
링크
답변
드래그 및 선택은 모두 마우스 다운 이벤트에서 초기화되고 후속 마우스 이동시 업데이트됩니다. 드래그를 시작하거나 마우스를 따라 가기 위해 이벤트를 처리 할 때 이벤트의 버블 링을 취소하고 기본 브라우저 반환을 재정의합니다.
마우스를 드래그하고 핸들러를 움직이기 시작할 때 이와 같은 것-
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();">
