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
3 Answers
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
-
2Beautiful! I'd been looking for a solution to this for a while, who would have dreamed it was so simple? For the edification of the interwebs: the "return false" method also prevents the cursor from changing to an i-beam in Chrome. I know Atwood dislikes people showing gratitude verbally in their comments, but Thank You anyway!– TojiJan 17, 2011 at 5:42
-
2For webkit browsers you can also add
body { -webkit-user-select: none; }
to your CSS. Sep 1, 2011 at 17:07 -
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.
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:
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.
Use pointer
for your cursor property instead, like this:
canvas { cursor: pointer; }
hand
is IE/Opera specific, you can see a full list of which cursors work in which browsers here.
-
particularly this note is helpful in the mentioned link quirksmode.org/css/cursor.html#note Apr 17, 2010 at 20:56
-
i put that in but still doing the same thing. Check it here: p-func.com/html5_test/test2.html– pfuncApr 17, 2010 at 21:30
-
@pfunc - I can't debug your page directly, it has a few invalid properties that needs correcting...
<script>
tags need to be<script></script>
, they can't be self closing like<script />
. Also there's an extra<body>
tag in there...can't debug funky behavior until it's valid :) Apr 17, 2010 at 21:55 -
thanks, this is what happens when a flash developer tries to go back to html. I chnaged those and still happening.– pfuncApr 17, 2010 at 22:18