2010-04-17 3 views
14

Je suis en train de jouer avec html5 et un peu de javascript pour faire un sketchpad mineur. Chaque fois que je clique sur la toile en chrome, le curseur devient un curseur de texte. J'ai essayé de mettre le curseur: la main dans le css, mais cela ne semble pas fonctionner. Cela doit être une chose facile, mais je regarde vers le haut et ne peut pas le trouver partouthtml5 problèmes de curseur main toile

+4

Eh bien, tout d'abord c'est "curseur: pointeur" pas "curseur: main" ... – animuson

Répondre

7

Utilisez pointer pour votre propriété de curseur à la place, comme ceci:

canvas { cursor: pointer; } 

hand est IE/Opera spécifique, you can see a full list of which cursors work in which browsers here.

+0

en particulier cette note est utile dans le lien mentionné http://www.quirksmode.org/css/cursor.html#note –

+0

Je mets ça mais je fais toujours la même chose. Vérifiez-le ici: http://p-func.com/html5_test/test2.html – pfunc

+0

@pfunc - Je ne peux pas déboguer votre page directement, il a quelques propriétés invalides qui ont besoin de correction ... '', ils ne peuvent pas se fermer automatiquement comme '

18

Utilisez la sélection de texte désactivée sur le canevas. Cela fonctionne comme un charme.

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

Cheers, Kris

+2

Magnifique! J'avais cherché une solution à cela pendant un moment, qui aurait rêvé que c'était si simple? Pour l'édification des interwebs: la méthode "return false" empêche également le curseur de passer à un i-beam dans Chrome. Je sais qu'Atwood déteste les gens qui expriment de la gratitude verbalement dans leurs commentaires, mais merci quand même! – Toji

+2

Pour les navigateurs Webkit, vous pouvez également ajouter 'body {-webkit-user-select: none; } 'à votre CSS. – Jacksonkr

+0

sympa! Cela m'a sauvé un peu de temps! – BaronVonKaneHoffen

12

Alors que les autres gars étaient tout à fait taper sur vous référant à la référence quirksmode, qui ne résoudra pas le problème que vous rencontrez, et essentiellement vous avez besoin de mettre en œuvre une variante de La réponse de Kris.

Dans ma propre mise en œuvre, je trouve que la prévention de comportement par défaut en cas mousedown était tout ce qui était nécessaire pour mettre fin à cette sélection de texte satanés curseur:

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); 

espoir qui aide.

Cheers, Damon.

+0

Oui, cela m'a aidé. Merci! – shino