Commentaire: Écrivez une session d'écoute pour un événement de clics multicouches. Je pense que c'est assez amusant. Il a donc été extrait du module. Des amis qui l'aiment peuvent y faire référence.
Récemment, j'ai écrit un cadre de jeu HTML5. Aujourd'hui, j'ai écrit sur l'écoute d'un événement de clics multicouches. Je pense que c'est assez amusant. Il a donc été extrait du module. Le code suivant n'est que quelques idées. L'implémentation spécifique n'est certainement pas si moche<! doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Document </Title>
<style type = "text / css">
.box> Canvas {
Position: absolue;
}
</ style>
</ head>
<body>
<div>
<lebvas> </ canvas>
<lebvas> </ canvas>
</div>
<script type = "text / javascript">
fonction getRect (obj) {
var x1 = obj.offsetleft;
var y1 = obj.offsetTop;
var x2 = x1 + obj.offsetWidth;
var y2 = y1 + obj.offsetheight;
retour {
x1: x1,
Y1: Y1,
x2: x2,
Y2: Y2
};
}
fonction à l'intérieur (x, y, rec) {
if (x> rect.x1 && x <rect.x2 && y> rect.y1 && y <rect.y2) {
Retour Vrai;
}
autre {
retourne false;
}
}
var Trigger = {};
Trigger.list = [];
Trigger.Listen = function () {
var list = Trigger.list;
document.addeventListener ('click', fonction (evt) {
pour (var i = 0; i <list.length; ++ i) {
list [i] (evt);
}
});
};
Trigger.Listen ();
var l1 = document.getElementById ('couche1');
var l2 = document.getElementById ('couche2');
var dl1 = fonction (evt) {
if (inside (evt.clientx, evt.clienty, getRect (l1))) {
console.log ('click');
}
}
Trigger.list.push (DL1);
var dl2 = fonction (evt) {
if (inside (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
}
}
Trigger.list.push (DL2);
</cript>
</docy>
</html>