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

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类应用于应该无法选择的元素。它也可以只应用于body（但是，最佳实践可能只是禁用用户选择真正需要它的元素）。

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

JS（IE仅需要＆lt; 10）：

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

偏离主题但它也可能对应用程序有意义：如果你在jsFiddle中选择一个大的lineWidth并且非常缓慢地移动鼠标，你会看到一些丑陋的效果（块）草图。始终检查从onmousemove（拖动时）坐标到最后一个坐标的距离是否太小。例如，如果距离大于行的1/6，则只将坐标添加到草图中。

Answer 2

我不会使用文档 .onselectstart。所有你需要做的就是把它放在有问题的画布上：

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

此外，您可以通过将addEventListener的最后一个参数设置为true来捕获画布上发生的鼠标按下/移动/向上事件。即使鼠标离开画布，这也会让您的绘图继续完美。

Answer 3

尝试使用此脚本，如果将拖动设置为true，则会禁用选择。这样，您可以在不绘画时选择文本。

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