最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋
代码如下:
.box > canvas {
position: absolute;
}
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 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[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); 更多信息请查看IT技术专栏