html5 svg 中元素點(diǎn)擊事件添加方法

字號:


    最近在用svg的點(diǎn)擊事件做東西,之所以用svg而不用canvas就是因?yàn)閟vg內(nèi)的元素可以添加點(diǎn)擊事件,他們之間詳細(xì)的區(qū)別如下:
    下表列出了 canvas 與 SVG 之間的一些不同之處。
    Canvas
    •依賴分辨率
    •不支持事件處理器
    •弱的文本渲染能力
    •能夠以 .png 或 .jpg 格式保存結(jié)果圖像
    •最適合圖像密集型的游戲,其中的許多對象會被頻繁重繪
    SVG
    •不依賴分辨率
    •支持事件處理器
    •最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)
    •復(fù)雜度高會減慢渲染速度(任何過度使用 DOM 的應(yīng)用都不快)
    •不適合游戲應(yīng)用
    做出的網(wǎng)頁在chorme下可以正常使用,因?yàn)橐С忠苿釉O(shè)備,在android上測試也正常,但是在ipad上打開頁面時發(fā)現(xiàn)點(diǎn)擊事件不管用了,查了很多資料,沒有找到問題原因,后來查到w3c中對于svg的描述的demo的確可以實(shí)現(xiàn)點(diǎn)擊的效果,對比代碼,發(fā)現(xiàn)自己使用的jquery給svg的元素添加的點(diǎn)擊事件,而在svg的元素中沒有 onclick="circle_click(evt)"類似描述,添加上onclick="click(evt)"果然在ipad上svg的元素有了點(diǎn)擊事件