来源:自学PHP网 时间:2015-01-26 11:14 作者: 阅读:次
[导读] 写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了,喜欢的朋友可以参考下...
写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了,喜欢的朋友可以参考下
复制代码 代码如下:<!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> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com