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的，you can see a full list of which cursors work in which browsers here。

html5 canvas手形光标问题

3 个答案: