Home > Article > Web Front-end > How to add element click event in html5 svg_html5 tutorial skills
Recently I am using svg's click event to make things. The reason why I use svg instead of canvas is because the elements in svg can add click events. The detailed differences between them are as follows:
Comparison between Canvas and SVG (See details)
The following table lists some differences between canvas and SVG.
Canvas
• Resolution dependent
• No support for event handlers
• Weak text rendering capabilities
• Ability to render in .png or .jpg format Save result image
• Best for graphics-intensive games where many objects will be redrawn frequently
SVG
• Not dependent on resolution
• Supported Event Handlers
• Best suited for applications with large rendering areas (like Google Maps)
• High complexity will slow down rendering (any app that overuses the DOM is not fast)
• Not suitable The web page created by the game application
can be used normally under Chrome because it needs to support mobile devices. It is also tested on Android and is normal. However, when opening the page on iPad, I found that the click event does not work. I checked a lot of information. , the cause of the problem was not found. Later, I found that the demo describing svg in w3c can indeed achieve the click effect. After comparing the code, I found that the jquery I used added a click event to the svg element, but there was no onclick= in the svg element. "circle_click(evt)" has a similar description. Add onclick="click(evt)" and sure enough, the svg element on the iPad has a click event.