使用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的新特性
Sep 05 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php代码书写习惯优化小结
2013/06/20 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php中cookie的使用方法
2014/03/29 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
详解Python locals()的陷阱
2019/03/26 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
10条PHP编程习惯
2014/05/26 面试题
成人继续教育实施方案
2014/03/01 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
高中生综合素质评价范文
2015/08/18 职场文书