댓글 : 다층 클릭 이벤트에 대한 청취 세션을 작성하십시오. 나는 그것이 꽤 재미 있다고 생각합니다. 그래서 그것은 모듈에서 추출되었습니다. 그것을 좋아하는 친구들은 그것을 언급 할 수 있습니다.
최근에 나는 HTML5 게임 프레임 워크를 썼습니다. 오늘 나는 다층 클릭 이벤트 청취에 대해 썼습니다. 나는 그것이 꽤 재미 있다고 생각합니다. 그래서 그것은 모듈에서 추출되었습니다. 다음 코드는 몇 가지 아이디어입니다. 특정 구현은 분명히 추악하지 않습니다<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
<스타일 유형 = "텍스트/CSS">
.box> canvas {
위치 : 절대;
}
</스타일>
</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) {
진실을 반환하십시오.
}
또 다른 {
거짓을 반환합니다.
}
}
var 트리거 = {};
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 (내부 (evt.clientx, evt.clienty, getRect (l1))) {
Console.log ( 'Click');
}
}
trigger.list.push (dl1);
var dl2 = function (evt) {
if (내부 (evt.clientx, evt.clienty, getRect (l2))) {
Console.log ( 'Click2');
}
}
trigger.list.push (dl2);
</스크립트>
</body>
</html>