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

最新推荐文章于 2024-08-10 05:02:47 发布

大宅小涛

最新推荐文章于 2024-08-10 05:02:47 发布

阅读量3.8k

点赞数

分类专栏： JS HTML5-JS

JS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML5-JS

4 篇文章 0 订阅

订阅专栏

<!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>