우발적 인 선택/끌기 방지

Question

html5 캔버스를 사용하는 그리기 응용 프로그램이 있습니다. 사용자가 그림을 그리고 펜이 캔버스 영역 밖으로 빠져 나오면 크롬은 페이지의 html 요소를 연한 파란색 또는 노란색으로 강조 표시합니다.

이 도면 경험에 혼란을 일으키는 것입니다. 그러한 사건이 일어나지 않도록하는 방법이 있습니까?

처리 및 코드를 그리기 행사는이 게시물의 기반으로한다 : 캔버스 태그 다음 경계 상자 외부에 드래그, 캔버스에 그릴 위의 일부 H1 태그를 추가하면 http://jsfiddle.net/rnNFB/1/

var x ; 
var y ; 

var lower = $('#lower').get(0).getContext('2d') ; 
var upper = $('#upper').get(0).getContext('2d') ; 

var dragging = false ; 

function drawStroke(ctx){ 
    var i ; 
    ctx.strokeStyle='rgba(0,0,0,0.5)' ; 
    ctx.lineWidth=10 ; 
    ctx.beginPath() ; 
    ctx.moveTo(x[0],y[0]) ; 
    for (i=1; i < x.length; i++){ 
     ctx.lineTo(x[i],y[i]) ; 
    } 
    ctx.stroke() ; 
} 

$('#upper').mousedown(function(e){ 
    x=[e.layerX]; 
    y=[e.layerY]; 
    dragging=true}) ; 

$('#upper').mousemove(function(e){ 
    if (dragging){ 
     x.push(e.layerX); 
     y.push(e.layerY); 
     upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
     drawStroke(upper) ; 
    }}) ; 

$('#upper').mouseup(function(e){ 
    dragging = false ; 
    upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ; 
    drawStroke(lower) ; 
}) ; 

, 당신은 볼 것이다 파란색 하이라이트. 이 문제를 방지 할 수있는 방법이 있습니까?

Answer 1

선택할 수없는 요소에 다음 CSS 클래스를 적용하십시오. 또한 몸에 적용 할 수 있습니다 (하지만 실제로 필요한 요소에서 사용자 선택을 비활성화하는 것이 가장 좋습니다). (단 IE < 10 필요)

.unselectable { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 

JS :

// the onselectstart way for navigator.appName === "Microsoft Internet Explorer" 
document.onselectstart = function() { return false; }; 

주제에서 벗어난하지만 그것은 또한 앱 interesing 될 수 있습니다 당신은 jsFiddle 및 이동에 큰 선폭을 선택하는 경우 마우스가 매우 천천히, 당신은 스케치에 몇 가지 못생긴 효과 (블록)를 볼 수 있습니다. onmousemove에서 드래그하는 동안 마지막 좌표까지의 거리가 너무 작지 않은지 항상 확인하십시오. 예를 들어 거리가 선 가위의 약 1/6보다 큰 경우 스케치에 좌표 만 추가하십시오.

Answer 2

이 스크립트를 사용하면 끌기가 true로 설정된 경우 선택을 사용할 수 없게됩니다. 이렇게하면 그리지 않을 때도 텍스트를 선택할 수 있습니다.

document.onselectstart = function(e) { 
    if (dragging) { 
    e.preventDefault(); 
    return false; 
    } 
}; 

Answer 3

나는 문서 .onselectstart를 사용하지 않을 것입니다. 당신이해야 할 모든 대신 문제의 캔버스에이를 넣어 :

canvas.onselectstart = function() { return false; };

은 또한 당신이/아래로 마우스를 캡처에 addEventListener의 마지막 인수를 설정하여 캔버스로 발생하는/최대 이벤트를 움직일 수 true. 이렇게하면 마우스가 캔버스를 떠난 경우에도 그림이 완벽하게 계속됩니다.