html5 canvas手形光标问题

Question

我正在玩html5和一些javascript来制作一个小型的画板.每当我在chrome中单击画布时,光标就会变成文本光标.我已经尝试将光标:手放在css中,但这似乎不起作用.这必须是一件容易的事,但我查了一下,无法在任何地方找到它

Answer 1

在画布上使用禁用文本选择.这就像一个魅力.

var canvas = document.getElementById('canvas');
canvas.onselectstart = function () { return false; } // ie
canvas.onmousedown = function () { return false; } // mozilla

干杯,克里斯

Answer 2

虽然其他人绝对会引用你的quirksmode参考,但这并不能解决你所遇到的问题,而且基本上你需要实现Kris答案的变体.

在我自己的实现中,我发现阻止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);

希望有所帮助.

干杯,达蒙.

Answer 3

用pointer你的鼠标属性来代替,就像这样:

canvas { cursor: pointer; }

hand是特定于IE/Opera,您可以在此处查看哪些游标在哪些浏览器中工作的完整列表.