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 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5 body设置自适应全屏
May 07 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
YII中assets的使用示例
2014/07/31 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python实现超级马里奥
2020/03/18 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
施工安全汇报材料
2014/08/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年防汛工作总结
2014/12/08 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
python实现简单的井字棋
2021/05/26 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库