ความคิดเห็น: เขียนเซสชันการฟังสำหรับเหตุการณ์คลิกหลายชั้น ฉันคิดว่ามันค่อนข้างสนุก ดังนั้นมันจึงถูกสกัดจากโมดูล เพื่อนที่ชอบมันสามารถอ้างถึงมันได้
เมื่อเร็ว ๆ นี้ฉันได้เขียนกรอบเกม HTML5 วันนี้ฉันเขียนเกี่ยวกับการฟังเหตุการณ์หลายชั้นคลิก ฉันคิดว่ามันค่อนข้างสนุก ดังนั้นมันจึงถูกสกัดจากโมดูล รหัสต่อไปนี้เป็นเพียงความคิดบางอย่าง การใช้งานที่เฉพาะเจาะจงนั้นไม่น่าเกลียดแน่นอน<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> เอกสาร </title>
<style type = "text/css">
.Box> Canvas {
ตำแหน่ง: สัมบูรณ์;
-
</style>
</head>
<body>
<div>
<Canvas> </sanvas>
<Canvas> </sanvas>
</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 ('คลิก', function (evt) {
สำหรับ (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 ('คลิก');
-
-
trigger.list.push (DL1);
var dl2 = function (evt) {
if (ภายใน (evt.clientx, evt.clienty, getRect (l2))) {
console.log ('click2');
-
-
trigger.list.push (DL2);
</script>
</body>
</html>