使用jTopo给Html5 Canva中绘制的元素添加鼠标事件


Posted in HTML / CSS onMay 15, 2014

使用Html5的时候,在Canvas上绘制的东西是不能相应鼠标事件的,但是使用jTopo添加事件非常简单,效果如下: 

使用jTopo给Html5 Canva中绘制的元素添加鼠标事件 

代码示例:

复制代码
代码如下:

var node = new JTopo.Node("Hello");
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = '按下右键';
}else if(event.button == 1){
node.text = '按下中键';
}else if(event.button == 0){
node.text = '按下左键';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = '松开右键';
}else if(event.button == 1){
node.text = '松开中键';
}else if(event.button == 0){
node.text = '松开左键';
}
});
node.click(function(event){
console.log("单击");
});
node.dbclick(function(event){
console.log("双击");
});
node.mousedrag(function(event){
console.log("拖拽");
});
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
});
node.mouseout(function(event){
console.log("mouseout");
});
HTML / CSS 相关文章推荐
CSS3悬停效果案例应用
Nov 21 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 #HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 #HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 #HTML / CSS
HTML5 embed标签定义和用法详解
May 09 #HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 #HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php array的学习笔记
2012/05/16 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
python检测lvs real server状态
2014/01/22 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Java及python正则表达式详解
2017/12/27 Python
python异步存储数据详解
2019/03/19 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
酒店总经理助理岗位职责
2014/02/01 职场文书
高三政治教学反思
2014/02/06 职场文书
红头文件任命书范本
2014/06/05 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
交通事故协议书范文
2014/10/23 职场文书
整改落实自查报告
2014/11/05 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python