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 相关文章推荐
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
JavaScript中的History历史对象
2008/01/16 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
js实现日期级联效果
2014/01/23 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
iView框架问题整理小结
2018/10/16 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python for循环生成列表的实例
2018/06/15 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python实现的Iou与Giou代码
2020/01/18 Python
django正续或者倒序查库实例
2020/05/19 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
什么是设计模式
2012/06/17 面试题
计算机相关的自我评价
2014/01/15 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
图文详解nginx日志切割的实现
2022/01/18 Servers
Python与C++中梯度方向直方图的实现
2022/03/17 Python