一个不错的HTML5 Canvas多层点击事件监听实例


Posted in HTML / CSS onApril 29, 2014

最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box > canvas {
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<canvas id="layer1" width="200" height="200"></canvas>
<canvas id="layer2" width="500" height="500"></canvas>
</div>
<script type="text/javascript">
function getRect(obj) {
var x1 = obj.offsetLeft;
var y1 = obj.offsetTop;
var x2 = x1+obj.offsetWidth;
var y2 = y1+obj.offsetHeight;
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2
};
}
function inside(x, y, rect) {
if(x>rect.x1 && x<rect.x2 && y>rect.y1 && y<rect.y2) {
return true;
}
else {
return false;
}
}
var trigger = {};
trigger.list = [];
trigger.listen = function() {
var list = trigger.list;
document.addEventListener('click',function(evt) {
for(var i=0; i<list.length; ++i) {
list[i](evt);
}
});
};
trigger.listen();
var l1 = document.getElementById('layer1');
var l2 = document.getElementById('layer2');
var dl1 = function(evt) {
if(inside(evt.clientX, evt.clientY, getRect(l1))) {
console.log('click');
}
}
trigger.list.push(dl1);
var dl2 = function(evt) {
if(inside(evt.clientX, evt.clientY, getRect(l2))) {
console.log('click2');
}
}
trigger.list.push(dl2);
</script>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
You might like
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php多重接口的实现方法
2015/06/20 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现的策略模式示例
2019/03/20 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python实时监控cpu小工具
2018/06/21 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
中学教师岗位职责
2013/11/26 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
经济管理专业自荐信
2013/12/30 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
联村联户简报
2015/07/21 职场文书
Flask response响应的具体使用
2021/07/15 Python