偶発的な選択/ドラッグの強調表示を防止する

Question

私はhtml5キャンバスを使って描画アプリケーションを持っています。ユーザーが描画してキャンバス領域からペンがずれた場合、chromeはページ上のhtml要素を薄い青色または黄色で強調表示します。

これは、描画の経験に破壊的です。そのようなハイライトが起こらないようにする方法はありますか？

コードを処理し、描画イベントは、この記事のオフに基づいています：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) ; 
}) ; 

あなたがしてバウンディングボックスの外側にドラッグ、キャンバス上に描画キャンバスのタグの上にいくつかのH1タグを追加する場合は、あなたが表示されます青いハイライトこの現象を防ぐ方法はありますか？

Answer 1

選択できない要素には、次のCSSクラスを適用します。また、ボディにのみ適用することもできます（ただし、実際に必要な要素に対するユーザーの選択を無効にすることがベストプラクティスです）。

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

JS（IEのみ< 10のために必要）：

// 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の最後の引数を設定することで、あなたのキャンバスにoccuringされるイベントを/上に移動マウスをキャプチャすることができtrue。マウスをキャンバスから離しても描画が完璧に続くようになります。