ทำให้องค์ประกอบไม่สามารถคลิกได้ (คลิกสิ่งที่อยู่ด้านหลัง)

92

ฉันมีรูปภาพคงที่ซึ่งซ้อนทับหน้าเมื่อผู้ใช้กำลังเลื่อนหน้าจอสัมผัส (มือถือ)

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

เป็นไปได้หรือไม่ หากจำเป็นฉันสามารถลองให้ภาพหน้าจอเป็นตัวอย่างสิ่งที่ฉันหมายถึง

ขอบคุณ!

— Hannebaumsaway
แหล่งที่มา

182

การตั้งค่า CSS - pointer-events: noneควรลบการโต้ตอบของเมาส์กับรูปภาพ รองรับได้ค่อนข้างดี แต่ IE

นี่คือรายการค่าทั้งหมดที่pointer-eventsสามารถใช้ได้

— คริสบราวน์
แหล่งที่มา

2

สมบูรณ์แบบ! ฉันไม่เคยวิ่งข้ามpointer-eventsมาก่อนนี่คือสิ่งที่ฉันกำลังมองหา ขอบคุณ!

— hannebaumsaway

1

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

— Chris Brown

@ChrisBrown การเปลี่ยนเคอร์เซอร์เป็นการกระตุกเล็กน้อย นี่เป็นเพียงเล็กน้อยของสิ่งที่ฉันคิดขึ้นกับjsfiddle.net/cxwvdos0ชนิดที่บ้าคลั่งเพียงแค่ปิดการใช้งานปุ่มหนึ่งวินาทีและไม่มีการเปลี่ยนเคอร์เซอร์ jQuery unbindและbindฉันคิดว่าจะใช้งานได้ถ้าฉันต้องการแปลงฟังก์ชันที่ไม่ระบุชื่อของฉัน ขอบคุณสำหรับการตอบกลับ!

— ฝุ่น

ไม่ทำงานบนอุปกรณ์เคลื่อนที่

— Hamendra Sunthwal

17

CSS Pointer Events คือสิ่งที่คุณต้องการดู ในกรณีของคุณตั้งค่าตัวชี้เหตุการณ์เป็น "ไม่มี" ดูตัวอย่าง JSFiddle นี้ ... http://jsfiddle.net/dppJw/1/

สังเกตว่าการดับเบิลคลิกที่ไอคอนจะยังคงบอกว่าคุณคลิกที่ย่อหน้า

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

— เทอร์รี่
แหล่งที่มา

1

ขอบคุณสำหรับตัวอย่าง!

— hannebaumsaway

การคลิกเพียงครั้งเดียว * และตัวอย่างโค้ด (คลิกไอคอน) ใช้ไม่ได้สำหรับฉันใน FF 68.0

— แอนดรู

3

หากคุณต้องการใช้ JavaScript:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

ขยายข้อมูลโค้ด

— Husam Ebish
แหล่งที่มา