Comentario: Escriba una sesión de escucha para un evento de clic en múltiples capas. Creo que es bastante divertido. Entonces fue extraído del módulo. Amigos a los que les gusta puede referirse a él.
Recientemente escribí un marco de juego HTML5. Hoy escribí sobre un evento de clic en múltiples capas escuchando. Creo que es bastante divertido. Entonces fue extraído del módulo. El siguiente código es solo algunas ideas. La implementación específica definitivamente no es tan fea<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
<style type = "text/css">
.Box> Canvas {
Posición: Absoluto;
}
</style>
</ablo>
<Body>
<div>
<Canvas> </Canvas>
<Canvas> </Canvas>
</div>
<script type = "text/javaScript">
función getRect (obj) {
var x1 = obj.offsetleft;
var y1 = obj.offsettop;
var x2 = x1+obj.offsetWidth;
var y2 = y1+obj.offsetheight;
devolver {
x1: x1,
Y1: Y1,
x2: x2,
Y2: Y2
};
}
función interior (x, y, rect) {
if (x> rect.x1 && x <rect.x2 && y> rect.y1 && y <rect.y2) {
devolver verdadero;
}
demás {
devolver falso;
}
}
Var Trigger = {};
trigger.list = [];
trigger.listen = function () {
var list = trigger.list;
document.addeventListener ('Click', function (EVT) {
para (var i = 0; i <list.length; ++ i) {
lista [i] (evt);
}
});
};
trigger.listen ();
var l1 = document.getElementById ('layer1');
var l2 = document.getElementById ('layer2');
var dl1 = function (evt) {
if (adentro (evt.clientx, evt.clienty, getRect (l1))) {
console.log ('hacer clic');
}
}
trigger.list.push (dl1);
var dl2 = function (evt) {
if (adentro (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
}
}
trigger.list.push (dl2);
</script>
</body>
</html>