javascript - 在某些浏览器中，从 Canvas 元素内部单击并拖动会突出显示其外部的文本

Question

我在页面中有一个 Canvas ，后面有一些文本:

<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;
}

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

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

我的问题:如何防止出现此突出显示问题？

Answer 1

您可以在拖动时禁用文本选择:演示: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')
}