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悬停效果案例应用
Nov 21 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python实现ATM系统
2020/02/17 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
教师年度考核评语
2014/04/28 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
鸟的天堂导游词
2015/01/31 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Pytorch 实现变量类型转换
2021/05/17 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫