Javascript 在某些浏览器中，从画布内部单击并拖动元素会高亮显示其外部的文本

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

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

如果我点击画布并按住，我可以在画布上移动鼠标并画线。伟大的但是，如果我一直按住鼠标，并将其从画布上向下移动，越过

文本，我将突出显示该文本。不太好！我注意到这种情况在某些浏览器中不会发生。以下是我测试的内容列表：

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

---

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

您可以在Drag上禁用文本选择：

演示：

---

我认为最好的答案是在所有画布鼠标事件处理程序中调用“e.preventDefault（）”，例如：

canvas.onmousedown = function(e){
    e.preventDefault();    // <-- this
    if( !drawing )
    {
        drawing = true;
        ctx.beginPath();
    }
}

canvas.onmousedown=函数（e）{
e、 preventDefault（）；//这非常接近，但它看起来像是
classList
属性，我需要支持它。请使用pollyfill或使用document.body.className=“unselectable”。不过，这是解决此问题的方法。现在，除了IE9之外，我已经在所有方面解决了此问题。
document.body.className=“unselectable”
确实添加了类，但在IE9中仍然可以选择文本。JSFIDLE在IE9中也失败了。为了更加确定，我确定它是IE9兼容IE9标准的模式。以前它是IE7标准，出于某种原因……现在，在IE9中，鼠标按下时返回false。哈哈，在出现此注释前几秒钟就这样做了。没有w一切正常。感觉有点不舒服，但什么时候感觉不舒服
.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')
}

canvas.onmousedown = function(e){
    e.preventDefault();    // <-- this
    if( !drawing )
    {
        drawing = true;
        ctx.beginPath();
    }
}