当我单击画布并拖动鼠标时，光标变为文本选择光标。我怎样才能防止这种情况？答案

【问题标题】：When I click on a canvas and drag my mouse, the cursor changes to a text-selection cursor. How can I prevent this?当我单击画布并拖动鼠标时，光标变为文本选择光标。我怎样才能防止这种情况？
【发布时间】：2012-08-02 01:38:50
【问题描述】：

这是一个小提琴：http://jsfiddle.net/MZ9Xm/

注意：以下情况发生在 Chrome 22.0.1221.1 中，但不在 Firefox 14.0.1 中。 [Ubuntu linux]

将鼠标移动到顶部画布并按住鼠标按钮。拖动鼠标，光标将变为文本选择鼠标光标（I-bar）。如果页面上没有其他元素，则不会发生这种情况。

我已经将用户选择设置为无，但没有任何运气。

【问题讨论】：

链接this question，部分cmets讨论了这个bug。

标签： javascript css google-chrome mouse-cursor

【解决方案1】：

您可以在画布中绑定 mousedown 事件以防止默认行为。

类似：

// with jQuery
$( "#canvasId" ).mousedown(function(event){
    event.preventDefault();
});

// without jQuery
document.getElementById( "canvasId" ).onmousedown = function(event){
    event.preventDefault();
};

这是更新后的小提琴：http://jsfiddle.net/MZ9Xm/1/

您需要对此进行测试，看看您所做的事情是否有副作用。

【讨论】：

【解决方案2】：

您尝试过使用CSS cursor property 吗？

canvas {
    cursor: pointer;
}

它应该显示默认光标。

【讨论】：

是的，我试过了，但没有骰子。在小提琴中尝试一下。光标仍变为文本选择光标。（在 Chrome 22.0.1221.1 中。我不需要做任何事情来让它与 Firefox 14.0.1 一起工作。）
这应该是 Chrome 的错误...无论如何，他们在this thread 遇到了同样的问题，看来他们已经解决了。
太棒了！我在那里找到了答案（这是达蒙的答案）。我不确定这里的协议。我想如果您将此答案更改为链接到 damon's，我会接受吗？
不幸的是，stackoverfow 的编辑按钮似乎不起作用：我得到了一个 beautiful error page :-p 还是谢谢

【解决方案3】：

试试这个：

var canvasEls = document.getElementsByTagName('canvas'),
    preventHl = function () { return false; },
    i = 0;

while (i < canvasEls.length) {
    canvasEls[i].onmousedown = preventHl;
    i += 1;
}

返回 false 将阻止发生突出显示等默认操作。

【讨论】：