html5 svg 中元素点击事件添加方法


Posted in HTML / CSS onJanuary 16, 2013

最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,他们之间详细的区别如下:
Canvas 与 SVG 的比较(详见)
下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas
•依赖分辨率
•不支持事件处理器
•弱的文本渲染能力
•能够以 .png 或 .jpg 格式保存结果图像
•最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG
•不依赖分辨率
•支持事件处理器
•最适合带有大型渲染区域的应用程序(比如谷歌地图)
•复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
•不适合游戏应用

做出的网页在chorme下可以正常使用,因为要支持移动设备,在android上测试也正常,但是在ipad上打开页面时发现点击事件不管用了,查了很多资料,没有找到问题原因,后来查到w3c中对于svg的描述的demo的确可以实现点击的效果,对比代码,发现自己使用的jquery给svg的元素添加的点击事件,而在svg的元素中没有 onclick="circle_click(evt)"类似描述,添加上onclick="click(evt)"果然在ipad上svg的元素有了点击事件

HTML / CSS 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
You might like
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
自己的js工具 Event封装
2009/08/21 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
python实现简单遗传算法
2018/03/19 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python matplotlib库的基本使用
2020/09/23 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
党课学习思想汇报
2014/01/02 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
片区教研活动总结
2014/07/02 职场文书
市场营销毕业求职信
2014/08/07 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
公司离职证明标准样本
2014/10/05 职场文书
《灰雀》教学反思
2016/02/19 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript