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

Posted 2023-03-05

【中文标题】防止意外选择/拖动突出显示

【英文标题】：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。

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

【参考方案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;
  
;