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 完美实现圆角效果
Jul 13 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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核心代码分析require和include的区别
2011/01/02 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
初识PHP
2014/09/28 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php格式化json函数示例代码
2016/05/12 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python实现一个简单的MySQL类
2015/01/07 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
keras中的History对象用法
2020/06/19 Python
python打包生成so文件的实现
2020/10/30 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
活动总结怎么写
2014/04/28 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
大学生党课感想
2015/08/11 职场文书
小学班级标语口号大全
2015/12/26 职场文书