Comentário: Escreva uma sessão de audição para um evento de clique de várias camadas. Eu acho que é muito divertido. Por isso foi extraído do módulo. Amigos que gostam pode se referir a ele.
Recentemente, escrevi uma estrutura de jogo HTML5. Hoje escrevi sobre uma audição de evento de clique de várias camadas. Eu acho que é muito divertido. Por isso foi extraído do módulo. O código a seguir são apenas algumas idéias. A implementação específica definitivamente não é tão feia<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Documento </title>
<style type = "text/css">
.Box> Canvas {
Posição: Absoluto;
}
</style>
</head>
<Body>
<div>
<lVAs> </canvas>
<lVAs> </canvas>
</div>
<script type = "text/javascript">
função getRect (obj) {
var x1 = obj.OffSetLeft;
var y1 = obj.offsetTop;
var x2 = x1+obj.offsetWidth;
var y2 = y1+obj.offsetHeight;
retornar {
x1: x1,
y1: y1,
x2: x2,
Y2: Y2
};
}
função dentro (x, y, ret) {
if (x> rect.x1 && x <rect.x2 && y> rect.y1 && y <ret.y2) {
retornar true;
}
outro {
retornar falso;
}
}
var trigger = {};
trigger.List = [];
trigger.Listen = function () {
var lista = trigger.list;
document.addeventlistener ('click', function (EVT) {
for (var i = 0; i <list.length; ++ i) {
lista [i] (EVT);
}
});
};
trigger.Listen ();
var L1 = document.getElementById ('camada1');
var L2 = document.getElementById ('camada2');
var dl1 = function (evt) {
if (interno (evt.clientX, evt.clienty, getRect (l1))) {
console.log ('clique');
}
}
trigger.list.push (dl1);
var dl2 = function (evt) {
if (interno (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
}
}
trigger.list.push (dl2);
</script>
</body>
</html>