小编Muh*_*him的帖子

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

<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：不存在高亮问题 …