Komentar: Tulis sesi mendengarkan untuk acara klik multi-lapisan. Saya pikir ini cukup menyenangkan. Jadi diekstraksi dari modul. Teman -teman yang menyukainya bisa merujuknya.
Baru -baru ini saya menulis kerangka kerja game HTML5. Hari ini saya menulis tentang acara klik multi-lapisan mendengarkan. Saya pikir ini cukup menyenangkan. Jadi diekstraksi dari modul. Kode berikut hanyalah beberapa ide. Implementasi spesifiknya jelas tidak terlalu jelek<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> dokumen </iteme>
<type style = "text/css">
.box> Canvas {
Posisi: Absolute;
}
</tyle>
</head>
<body>
<div>
<Canvas> </an Canvas>
<Canvas> </an Canvas>
</div>
<type skrip = "Teks/JavaScript">
fungsi getRect (obj) {
var x1 = obj.offsetleft;
var y1 = obj.offsettop;
var x2 = x1+obj.offsetwidth;
var y2 = y1+obj.offsetheight;
kembali {
x1: x1,
Y1: Y1,
x2: x2,
Y2: Y2
};
}
fungsi di dalam (x, y, rect) {
if (x> rect.x1 && x <rect.x2 && y> rect.y1 && y <rect.y2) {
Kembali Benar;
}
kalau tidak {
mengembalikan false;
}
}
var trigger = {};
trigger.list = [];
trigger.listen = function () {
var list = trigger.list;
Document.addeventListener ('klik', function (evt) {
untuk (var i = 0; i <list.length; ++ i) {
Daftar [i] (EVT);
}
});
};
trigger.listen ();
var l1 = document.geteLementById ('layer1');
var l2 = document.geteLementById ('layer2');
var dl1 = function (evt) {
if (di dalam (evt.clientx, evt.clienty, getRect (l1))) {
console.log ('klik');
}
}
trigger.list.push (DL1);
var dl2 = function (evt) {
if (di dalam (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
}
}
trigger.list.push (dl2);
</script>
</body>
</html>