在某些浏览器中从画布元素内部单击并拖动突出显示其外部的文本

Question

我在页面中有一个画布，后面有一些文本：

<canvas id="myCanvas" width="800" height="160"></canvas>
<p>Some text after the canvas</p>

我使用 JavaScript 绘制点/线。这个很简单。

var canvas  = document.getElementById("myCanvas");
var ctx     = canvas.getContext("2d");
var drawing = false;

canvas.onmousedown = function(e){
    if( !drawing )
    {
        drawing = true;
        ctx.beginPath();
    }
}

canvas.onmousemove = function(e){
    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;

    if( drawing )
    {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}

canvas.onmouseup = function(e){
    drawing = false;
}

canvas.onmouseout = function(e){
    drawing = false;
}

如果我点击画布并按住，我可以在画布中移动鼠标并绘制线条。伟大的！但是，如果我继续按住鼠标并将鼠标从画布上移开并越过<p>文本，我最终会突出显示该文本。不太好！我注意到这在某些浏览器中不会发生。这是我测试过的列表：

• Firefox 37：不存在高亮问题
• IE 9：存在突出显示问题
• IE 11：存在突出显示问题
• Chrome 41：存在突出显示问题

我的问题：可以做些什么来防止这个突出显示问题的发生？

Answer 1

您可以禁用文本选择 onDrag：

演示：http : //jsfiddle.net/zb2soupb/

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


canvas.onmousemove = function(e){

    // Dissable text selection
    document.body.classList.add('unselectable')

    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;

    if( drawing )
    {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}

canvas.onmouseup = function(e){
    drawing = false;
    document.body.classList.remove('unselectable')
}