建站资讯

什么是H5建站_一个不错的HTML5 Canvas多层点击事件

作者:admin 发布时间:2020-12-25
一个不错的HTML5 Canvas多层点击事件监听实例   发布     写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了,喜欢的朋友可以参考下
最近写一个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
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中百度地图的点击事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小

最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,接下来详细介绍添加方法,感兴趣的朋友可以了解下

这篇文章主要介绍了html5中监听canvas内部元素点击事件的三种方法

收缩