Javascript html5画布手形光标问题
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2659999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 canvas hand cursor problems
提问by pfunc
I'm playing around with html5 and some javascript to make a minor sketchpad. Whenever I click down on the canvas in chrome, the cursor becomes a text cursor. I have tried putting cursor: hand in the css, but that doesn't seem to work. This has got to be an easy thing, but I look it up and can't find it anywhere
我正在使用 html5 和一些 javascript 来制作一个小画板。每当我在 chrome 中点击画布时,光标就会变成文本光标。我试过将 cursor: hand 放在 css 中,但这似乎不起作用。这一定是一件容易的事情,但我查了一下,在任何地方都找不到
回答by Kris
Use the disable text selection on the canvas. This works like a charm.
使用画布上的禁用文本选择。这就像一个魅力。
var canvas = document.getElementById('canvas');
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla
Cheers, Kris
干杯,克里斯
回答by Damon Oehlman
While the other guys were absolutely bang on referring you to the quirksmode reference, that won't fix the problem you are having, and essentially you need to implement a variation of Kris's answer.
虽然其他人绝对推荐您参考 quirksmode 参考,但这并不能解决您遇到的问题,并且基本上您需要实施 Kris 答案的变体。
In my own implementation, I found that preventing default behaviour in the mousedown event was all that was required to stop that pesky text selection cursor:
在我自己的实现中,我发现在 mousedown 事件中阻止默认行为是停止讨厌的文本选择光标所需的全部内容:
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
// you can change the cursor if you want
// just remember to handle the mouse up and put it back :)
evt.target.style.cursor = 'move';
// rest of code goes here
}
document.addEventListener('mousedown', handleMouseDown, false);
Hope that helps.
希望有帮助。
Cheers, Damon.
干杯,达蒙。
回答by Nick Craver
Use pointerfor your cursor property instead, like this:
用pointer你的鼠标属性来代替,就像这样:
canvas { cursor: pointer; }
handis IE/Opera specific, you can see a full list of which cursors work in which browsers here.
hand是特定于 IE/Opera 的,您可以在此处查看哪些游标在哪些浏览器中工作的完整列表。

