一个不错的HTML5 Canvas多层点击事件监听实例
2015-04-07 17:57
381 查看
<!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>
相关文章推荐
- 一个不错的HTML5 Canvas多层点击事件监听实例
- HTML5 Canvas多层点击事件监听实例
- HTML5 Canvas的一个有趣实例
- <html5 canvas>一个简单的矩形,clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown
- Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器
- Canvas的事件处理,监听点击的位置
- HTML5里面的一个知识:Canvas二层与KineticJS完成事件!
- addEventListener() 方法 实例 点用户点击按钮时触发监听事件:
- Android activity加入左右监听手势,页面是一个listview,不影响listview的点击事件
- 在SWT中,如何点击一个按钮跳转到另外一个窗口?监听事件如何编写?
- 设置一个监听器监听多个按钮事件(点击按钮进入一个指定的网站)
- C#简单文本编辑器(利用ToolStrip、enu、一个事件多个监听等)
- Event/Delegate的一个不错实例
- 郭克华手机编程教学视频----我的练习源码(18)Canvas事件监听:
- JavaScript事件监听完整实例
- 一个不错的可拖动层遮罩加ALPHA滤镜(点击弹出后背景变浅色,信息提示框效果)
- JavaScript事件监听完整实例(含注释)
- 移动项目开发笔记(禁止一个按钮在服务器事件处理完成前连续点击按钮)
- C#中委托和事件的一个简单实例
- TextEvent事件小实例一个