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

【问题标题】：Prevent accidental select/drag highlight防止意外选择/拖动突出显示
【发布时间】：2011-10-26 21:45:07
【问题描述】：

我有一个使用 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 标签，然后在画布上绘制，将其拖到边界框之外，您将看到蓝色突出显示。有没有办法防止这种行为？

【问题讨论】：

这个问题不仅限于canvas。
是的，它适用于任何拖放、行选择等，几乎所有与文本内容无关的东西......我发现下面的答案在许多情况下都有帮助.

标签： html canvas drawing highlight

【解决方案1】：

将以下 CSS 类应用于应该不可选择的元素。它也可以仅应用于正文（不过，最佳做法可能是仅在真正需要它的元素上禁用用户选择）。

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

JS（仅 IE

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

题外话，但它也可能对应用程序很有趣：如果您在 jsFiddle 中选择一个大的 lineWidth 并非常缓慢地移动鼠标，您会在草图。始终检查从 onmousemove（拖动时）坐标到最后一个坐标的距离是否不太小。例如，仅当距离超过 linewith 的 1/6 左右时才将坐标添加到草图中。

【讨论】：

这行得通，谢谢！我可能会一直将整个页面“不可选择”应用到任何地方，因为有时 mouseDown 事件也会意外发生在画布之外。另外，特别感谢有关块状线条的提示！我想知道为什么会这样。谢谢！
user-select 现在被所有主流浏览器支持（参见caniuse.com/user-select-none）。这简化了实现。只需使用.css('user-select', 'none')。如果您需要支持 IE 10 之前的版本，那么您很不走运，需要应用 hack。

【解决方案2】：

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

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

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

【讨论】：

hmm，尝试在我类似的绘图应用程序中使用 canvas.onselectstart，但它仅在鼠标光标悬停在画布上时禁用选择。

【解决方案3】：

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

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

【讨论】：