防止意外选择/拖动突出显示

Question

我有一个使用 html5 canvas 的绘图应用程序。当用户绘图并且笔滑出画布区域时，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 {
  user-select: none;
}

离题，但它对于应用程序来说也可能很有趣：如果您在 jsFiddle 中选择较大的 lineWidth 并非常缓慢地移动鼠标，您可以在草图中看到一些丑陋的效果（块）。请始终检查从 onmousemove（拖动时）坐标到最后一个坐标的距离是否太小。例如，仅当距离大于线距的约 1/6 时，才将坐标添加到草图。

Answer 2

我不会使用 document.onselectstart。您所要做的就是将其放在有问题的画布上：

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

此外，您可以通过将

addEventListener

的最后一个参数设置为

true

来捕获画布上发生的鼠标按下/移动/向上事件。即使鼠标离开画布，这也能让您的绘图完美继续。

Answer 3

尝试这个脚本，如果拖动设置为 true，它将禁用选择。这样您在不绘图时仍然可以选择文本。

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