Комментарий: Напишите сеанс прослушивания для многослойного события Click. Я думаю, это довольно весело. Так что он был извлечен из модуля. Друзья, которым это нравится, могут ссылаться на это.
Недавно я написал игровой фреймворк HTML5. Сегодня я написал о многослойном прослушивании событий. Я думаю, это довольно весело. Так что он был извлечен из модуля. Следующий код - это просто некоторые идеи. Конкретная реализация определенно не так уж и уродливая<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
<стиль типа = "text/css">
.box> Canvas {
позиция: абсолютно;
}
</style>
</head>
<тело>
<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) {
вернуть истину;
}
еще {
вернуть ложь;
}
}
var trigger = {};
trigger.list = [];
trigger.listen = function () {
var list = trigger.list;
document.addeventlistener ('click', function (evt) {
for (var i = 0; i <list.length; ++ i) {
список [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>