コメント:マルチレイヤークリックイベントのリスニングセッションを作成します。とても楽しいと思います。そのため、モジュールから抽出されました。それが好きな友達はそれを参照できます。
最近、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>