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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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类中Static方法效率测试代码
2010/10/17 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python中endswith()函数的基本使用
2015/04/07 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python相对企业语言优势在哪
2020/06/12 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
心理咨询承诺书
2014/05/20 职场文书
小学教师自我评价
2015/03/04 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
用Python将库打包发布到pypi
2021/04/13 Python