التعليق: اكتب جلسة استماع لحدث نقر متعدد الطبقات. أعتقد أنه ممتع للغاية. لذلك تم استخلاصه من الوحدة النمطية. يمكن للأصدقاء الذين يحبون ذلك الرجوع إليها.
لقد كتبت مؤخرًا إطار عمل HTML5. كتبت اليوم عن الاستماع لحدث النقرات متعددة الطبقات. أعتقد أنه ممتع للغاية. لذلك تم استخلاصه من الوحدة النمطية. الكود التالي هو مجرد بعض الأفكار. التنفيذ المحدد هو بالتأكيد ليس قبيح<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> وثيقة </title>
<type type = "text/css">
.box> canvas {
الموقف: مطلق ؛
}
</style>
</head>
<body>
<viv>
<Canvas> </tanvas>
<Canvas> </tanvas>
</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 = trigger.list ؛
document.addeventListener ('Click' ، 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 (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>