Heim >Web-Frontend >H5-Tutorial >So fügen Sie ein Element-Klick-Ereignis in HTML5 hinzu. SVG_HTML5-Tutorial-Fähigkeiten
Vor kurzem verwende ich das Klickereignis von SVG, um Dinge zu erstellen. Der Grund, warum ich SVG anstelle von Canvas verwende, ist, dass die Elemente in SVG Klickereignisse hinzufügen können:
Vergleich zwischen Canvas und SVG (Siehe Details)
In der folgenden Tabelle sind einige Unterschiede zwischen Canvas und SVG aufgeführt.
Canvas
• Auflösungsabhängig
• Keine Unterstützung für Event-Handler
• Schwache Textwiedergabefunktionen
• Möglichkeit zum Rendern im .png- oder .jpg-Format Ergebnisbild speichern
• Am besten für grafikintensive Spiele geeignet, bei denen viele Objekte häufig neu gezeichnet werden
SVG
• Nicht abhängig von der Auflösung
• Unterstützte Ereignishandler
• Am besten geeignet für Anwendungen mit großen Renderbereichen (wie Google Maps)
• Hohe Komplexität verlangsamt das Rendern (jede App, die das DOM übermäßig nutzt, ist nicht schnell)
• Nicht geeignet Die von der Spieleanwendung erstellte Webseite
kann unter Chrome normal verwendet werden, da es auch auf Android getestet wurde und normal ist. Beim Öffnen der Seite auf dem iPad habe ich jedoch festgestellt, dass das Klickereignis nicht funktioniert Ich habe viele Informationen überprüft und die Ursache des Problems nicht gefunden. Später stellte ich fest, dass die Demo, die SVG in w3c beschreibt, tatsächlich einen Klickeffekt erzielen kann zum SVG-Element, aber es gab kein onclick= im SVG-Element. „Circle_click(evt)“ hat eine ähnliche Beschreibung. Fügen Sie onclick="click(evt)" hinzu und tatsächlich hat das SVG-Element auf dem iPad ein Click-Ereignis .