HTML5画布手形光标问题

Question

HTML5画布手形光标问题

14

我正在尝试使用HTML5和一些JavaScript制作一个小型的画板。每当我在Chrome中点击画布时，光标就会变成文本光标。我尝试在CSS中添加cursor：hand，但似乎不起作用。这肯定是一件容易的事情，但我查了一下，却找不到解决方法。

- pfunc

4

首先，正确的写法是"cursor:pointer"而不是"cursor:hand"。 - animuson

3个回答

12

虽然其他人对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);

希望能有所帮助。

谢谢， Damon。

- Damon Oehlman

7

使用pointer替换鼠标属性，如下所示：

canvas { cursor: pointer; }

hand 是IE/Opera特有的，您可以在这里查看哪些浏览器支持哪些光标。

- Nick Craver

特别是在以下链接中，这个注释非常有帮助：http://www.quirksmode.org/css/cursor.html#note - Mahesh Velaga

我已经将它放进去了，但还是做着同样的事情。在这里检查它：http://p-func.com/html5_test/test2.html - pfunc

@pfunc - 我无法直接调试你的页面，它有一些无效的属性需要修正... <script> 标签需要写成 <script></script> 的形式，不能像 <script /> 那样自闭合。还有一个多余的 <body> 标签...只有在它是有效的情况下才能调试奇怪的行为 :) - Nick Craver

谢谢，这就是当一个Flash开发者试图回到HTML时会发生的事情。我已经更改了那些内容，但问题仍然存在。 - pfunc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kris · Accepted Answer

在画布上使用禁用文本选择。这非常有效。

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

祝你好运，
Kris