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
Répondre
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.
en particulier cette note est utile dans le lien mentionné http://www.quirksmode.org/css/cursor.html#note –
Je mets ça mais je fais toujours la même chose. Vérifiez-le ici: http://p-func.com/html5_test/test2.html – pfunc
@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 ''. De plus, il y a une balise "
" supplémentaire là-dedans ... impossible de déboguer un comportement funky jusqu'à ce qu'il soit valide :) –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
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
Pour les navigateurs Webkit, vous pouvez également ajouter 'body {-webkit-user-select: none; } 'à votre CSS. – Jacksonkr
sympa! Cela m'a sauvé un peu de temps! – BaronVonKaneHoffen
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.
Oui, cela m'a aidé. Merci! – shino
- 1. Traduction d'une toile html5
- 2. Balise HTML5 pour Toile
- 3. toile HTML5 cliquez événement
- 4. Défi toile HTML5!
- 5. Toile HTML5 vs SVG/VML?
- 6. html5 - élément toile - couches multiples
- 7. Graphiques vectoriels HTML5 sur toile?
- 8. HTML5 problème de couche de toile
- 9. Tileset pour jeu de toile HTML5
- 10. HTML5 toile AVC() épais et floue
- 11. Partiellement transparent (opacité) HTML5 Dessin sur toile
- 12. Toile en HTML5: Suppression Rectangle Précédent
- 13. Convertir PictureStream à la toile HTML5
- 14. Toile HTML5 drawImage avec un angle
- 15. Toile HTML5 - Remplir un cercle avec l'image
- 16. Le curseur CSS2 n'affiche pas "main"
- 17. Toile HTML5 sur les téléphones Android - Redessiner et mettre en évidence les problèmes
- 18. QtWebKit problèmes de lecture vidéo HTML5
- 19. Un logiciel comme le mélange pour l'animation de toile HTML5?
- 20. Comment charger un fichier bitmap dans la toile de HTML5
- 21. Combinaison de deux images sur une toile en HTML5
- 22. html5 toile en cliquant sur bezier chemin détection de forme
- 23. Curseur de la main en survolant le champ de texte
- 24. Toile HTML5: dessine un rectangle autour du texte?
- 25. HTML5 enregistrer toile à déposer sur le serveur
- 26. Comment ajouter une bordure sur HTML5 Toile 'Text?
- 27. Comment utiliser le curseur main google maps en Python?
- 28. Toile ou quoi?
- 29. Problèmes d'alignement du curseur jquery ie6 & 7
- 30. Toile effets de dessin professionnel
Eh bien, tout d'abord c'est "curseur: pointeur" pas "curseur: main" ... – animuson