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实现背景模糊的三种方式(小结)
May 15 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
DEFER怎么用?
2006/07/01 Javascript
js获取单选按钮的数据
2006/11/27 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
安装dbus-python的简要教程
2015/05/05 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python3 assert断言实现原理解析
2020/03/02 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python合并多个excel文件的示例
2020/09/23 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
护理专科毕业生自荐书范文
2014/02/19 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
考试没考好检讨书
2015/05/06 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python