Kommentar: Schreiben Sie eine Hörsitzung für ein Multi-Layer-Klick-Ereignis. Ich denke, es macht ziemlich viel Spaß. So wurde es aus dem Modul extrahiert. Freunde, die es mögen, können sich darauf beziehen.
Kürzlich habe ich ein HTML5 -Spiel -Framework geschrieben. Heute habe ich über ein Multi-Layer-Klick-Event-Hören geschrieben. Ich denke, es macht ziemlich viel Spaß. So wurde es aus dem Modul extrahiert. Der folgende Code ist nur einige Ideen. Die spezifische Implementierung ist definitiv nicht so hässlich<! docType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
<style type = "text/css">
.box> canvas {
Position: absolut;
}
</style>
</head>
<body>
<div>
<Canvas> </canvas>
<Canvas> </canvas>
</div>
<script type = "text/javaScript">
Funktion getRect (obj) {
var x1 = obj.offsetleft;
var y1 = obj.offsettop;
var x2 = x1+obj.offsetwidth;
var y2 = y1+obj.offseteight;
zurückkehren {
x1: x1,
y1: y1,
x2: x2,
Y2: Y2
};
}
Funktion innerhalb (x, y, rect) {
if (x> rect.x1 && x <rekt.x2 && y> rect.y1 && y <rect.y2) {
zurückkehren;
}
anders {
false zurückgeben;
}
}
var Trigger = {};
Trigger.List = [];
trigger.listen = function () {
var list = Trigger.List;
document.addeventListener ('klick', function (evt) {
für (var i = 0; i <list.length; ++ i) {
Liste [i] (EVT);
}
});
};
Trigger.Listen ();
var l1 = document.getElementById ('Layer1');
var l2 = document.getElementById ('Layer2');
var dl1 = function (evt) {
if (innen (evt.clientx, evt.clienty, getRect (l1))) {
console.log ('click');
}
}
trigger.list.push (dl1);
var dl2 = function (evt) {
if (innen (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
}
}
trigger.list.push (dl2);
</script>
</body>
</html>