ส่งเหตุการณ์ของเมาส์ผ่านองค์ประกอบตำแหน่งอย่างแน่นอน

ฉันกำลังพยายามที่จะจับภาพเหตุการณ์ของเมาส์บนองค์ประกอบที่มีองค์ประกอบที่จัดวางอย่างอื่นอยู่ด้านบนของมัน

ตอนนี้เหตุการณ์ในองค์ประกอบที่มีการจัดวางอย่างถูกต้องจะพุ่งเข้าหาผู้ปกครอง แต่ฉันต้องการให้มัน "โปร่งใส" สำหรับกิจกรรมเมาส์เหล่านี้และส่งต่อไปยังสิ่งที่อยู่ด้านหลัง ฉันควรใช้สิ่งนี้อย่างไร

pointer-events: none;

เป็นคุณสมบัติ CSS ที่ทำให้เหตุการณ์ "ผ่าน" องค์ประกอบที่จะใช้และทำให้เหตุการณ์เกิดขึ้นในองค์ประกอบ "ด้านล่าง"

ดูรายละเอียดได้ที่: https://developer.mozilla.org/en/css/pointer-events

ไม่รองรับ IE 11; ผู้ขายรายอื่นทั้งหมดให้การสนับสนุนเป็นเวลาพอสมควร (การสนับสนุนทั่วโลกอยู่ที่ ~ 92% ใน 12 / '16): http://caniuse.com/#feat=pointer-events (ขอบคุณ @ s4y สำหรับการให้ลิงก์ในความคิดเห็น) .

หากสิ่งที่คุณต้องการคือ mousedown คุณอาจจะสามารถทำได้ด้วยdocument.elementFromPointวิธีการโดย:

1. เอาชั้นบนสุดบน mousedown
2. ผ่านxและyพิกัดจากเหตุการณ์ไปยังdocument.elementFromPointวิธีการรับองค์ประกอบภายใต้แล้ว
3. การคืนค่าชั้นบนสุด

เป็นสิ่งที่ดีที่จะรู้ ...
กิจกรรมตัวชี้สามารถปิดใช้งานสำหรับองค์ประกอบหลัก (อาจเป็น div โปร่งใส) และยังเปิดใช้งานสำหรับองค์ประกอบลูก สิ่งนี้มีประโยชน์หากคุณทำงานกับเลเยอร์ div ที่ทับซ้อนกันหลายชั้นซึ่งคุณต้องการคลิกองค์ประกอบย่อยของเลเยอร์ใดก็ได้ สำหรับ divs การเลี้ยงดูทั้งหมดนี้จะได้รับpointer-events: noneและ click-children รับตัวชี้เหตุการณ์ที่เปิดใช้งานอีกครั้งโดยpointer-events: all

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

เหตุผลที่คุณไม่ได้รับเหตุการณ์เป็นเพราะองค์ประกอบที่วางตำแหน่งอย่างแน่นอนไม่ใช่ลูกขององค์ประกอบที่คุณต้องการที่จะ "คลิก" (div สีน้ำเงิน) วิธีที่สะอาดที่สุดที่ฉันคิดได้ก็คือการใส่องค์ประกอบที่สมบูรณ์ไว้เป็นลูกขององค์ประกอบที่คุณต้องการให้คลิก แต่ฉันสมมติว่าคุณไม่สามารถทำได้หรือคุณจะไม่โพสต์คำถามนี้ที่นี่ :)

อีกตัวเลือกหนึ่งคือการลงทะเบียนตัวจัดการเหตุการณ์การคลิกสำหรับองค์ประกอบแบบสัมบูรณ์และเรียกตัวจัดการการคลิกสำหรับตัวแบ่งสีน้ำเงินซึ่งทำให้ทั้งคู่กะพริบ

เนื่องจากเหตุการณ์ที่เกิดขึ้นผ่าน DOM ฉันไม่แน่ใจว่าจะมีคำตอบที่ง่ายกว่าสำหรับคุณ แต่ฉันอยากรู้อยากเห็นมากถ้ามีคนอื่นมีกลอุบายที่ฉันไม่รู้เกี่ยวกับ!

มีเวอร์ชันจาวาสคริปต์ที่เปลี่ยนเส้นทางเหตุการณ์จาก div หนึ่งไปยังอีกด้วยตนเอง

ฉันล้างมันและทำให้เป็นปลั๊กอิน jQuery

นี่คือที่เก็บ Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

น่าเสียดายที่วัตถุประสงค์ที่ฉันใช้สำหรับ - การซ้อนทับหน้ากากบน Google แผนที่ไม่ได้จับการคลิกและการลากและเคอร์เซอร์ของเมาส์ไม่เปลี่ยนแปลงซึ่งทำให้ประสบการณ์การใช้งานของผู้ใช้ลดลงพอที่ฉันเพิ่งตัดสินใจซ่อนหน้ากากภายใต้ IE และ Opera - เบราว์เซอร์สองตัวที่ไม่รองรับกิจกรรมตัวชี้

หากคุณรู้องค์ประกอบที่ต้องการกิจกรรมเมาส์และหากการซ้อนทับของคุณโปร่งใสคุณสามารถตั้งค่าดัชนี z ของสิ่งเหล่านั้นให้สูงกว่าการวางซ้อน แน่นอนเหตุการณ์ทั้งหมดควรทำงานในกรณีนั้นในเบราว์เซอร์ทั้งหมด