コメント：マルチレイヤークリックイベントのリスニングセッションを作成します。とても楽しいと思います。そのため、モジュールから抽出されました。それが好きな友達はそれを参照できます。
最近、HTML5ゲームフレームワークを書きました。今日、私は多層クリックイベントのリスニングについて書きました。とても楽しいと思います。そのため、モジュールから抽出されました。次のコードは、いくつかのアイデアです。具体的な実装は間違いなくそれほど醜いものではありません<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
<style type = "text/css">
.box> canvas {
位置：絶対;
}
</style>
</head>
<body>
<div>
<canvas> </canvas>
<canvas> </canvas>
</div>
<script type = "text/javascript">
関数getRect（obj）{
var x1 = obj.offsetleft;
var y1 = obj.offsettop;
var x2 = x1+obj.offsetwidth;
var y2 = y1+obj.offsetheight;
戻る {
x1：x1、
Y1：Y1、
x2：x2、
Y2：Y2
};
}
内部（x、y、rect）{{
if（x> rect.x1 && x <rect.x2 && y> rect.y1 && y <rect.y2）{
trueを返します。
}
それ以外 {
falseを返します。
}
}
var trigger = {};
trigger.list = [];
trigger.listen = function（）{
var list = trigger.list;
document.addeventlistener（ 'click'、function（evt）{
for（var i = 0; i <list.length; ++ i）{
list [i]（evt）;
}
}）;
};
trigger.listen（）;
var l1 = document.getElementById（ 'layer1'）;
var l2 = document.getElementById（ 'layer2'）;
var dl1 = function（evt）{
if（inside（evt.clientx、evt.clienty、getRect（l1）））{
console.log（ 'click'）;
}
}
trigger.list.push（dl1）;
var dl2 = function（evt）{
if（inside（evt.clientx、evt.clienty、getRect（l2）））{
console.log（ 'click2'）;
}
}
trigger.list.push（dl2）;
</script>
</body>
</html>