Maison  >  Article  >  interface Web  >  Comment ajouter un événement de clic d'élément dans les compétences du didacticiel html5 svg_html5

Comment ajouter un événement de clic d'élément dans les compétences du didacticiel html5 svg_html5

WBOY
WBOYoriginal
2016-05-16 15:50:042167parcourir

Récemment, j'utilise l'événement click de svg pour créer des choses. La raison pour laquelle j'utilise svg au lieu de canvas est que les éléments de svg peuvent ajouter des événements click. Les différences détaillées entre eux sont les suivantes :
Comparaison entre Canvas et. SVG (Voir détails)
Le tableau suivant répertorie quelques différences entre Canvas et SVG.

Canvas
• Dépend de la résolution
• Aucune prise en charge des gestionnaires d'événements
• Faibles capacités de rendu de texte
• Possibilité de rendu au format .png ou .jpg Enregistrer l'image du résultat
• Idéal pour les jeux à forte intensité graphique où de nombreux objets seront redessinés fréquemment

SVG
• Ne dépend pas de la résolution
• Gestionnaires d'événements pris en charge
• Idéal pour les applications avec de grandes zones de rendu (comme Google Maps)
• Une complexité élevée ralentira le rendu (toute application qui abuse du DOM n'est pas rapide)
• Ne convient pas La page Web créée par l'application de jeu

peut être utilisé normalement sous Chrome car il doit prendre en charge les appareils mobiles. Il est également testé sur Android et est normal. Cependant, lors de l'ouverture de la page sur iPad, j'ai constaté que l'événement de clic ne fonctionnait pas. J'ai vérifié beaucoup d'informations, la cause du problème n'a pas été trouvée. Plus tard, j'ai découvert que la démo décrivant svg dans w3c pouvait effectivement obtenir l'effet de clic. Après avoir comparé le code, j'ai découvert que le jquery que j'ai utilisé ajoutait un événement de clic. à l'élément svg, mais il n'y avait pas de onclick= dans l'élément svg. "circle_click(evt)" a une description similaire. Ajoutez onclick="click(evt)" et bien sûr, l'élément svg sur l'iPad a un événement click. .

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn