HTML / CSS: สร้าง div ให้ "มองไม่เห็น" กับการคลิกหรือไม่

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

ตัวอย่างเช่นoverlaydiv ครอบคลุมข้อความ แต่ฉันต้องการให้สามารถคลิก / เลือกข้อความผ่านoverlaydiv:

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

ก็สามารถทำได้โดยใช้ pointer-eventsCSS คุณสมบัตินี้รองรับใน Firefox 3.6+, Chrome 2+, IE 11+ และ Safari 4+ ขออภัยฉันไม่มีความรู้เกี่ยวกับวิธีแก้ปัญหาข้ามเบราว์เซอร์

#overlay {
  pointer-events: none;
}

สามารถทำได้โดยการรีเฟรชกิจกรรมหลังจากที่คุณซ่อนภาพซ้อนทับชั่วคราว

ดูคำตอบแรกสำหรับคำถามนี้: HTML "การวางซ้อน" ซึ่งช่วยให้คลิกผ่านไปยังองค์ประกอบที่อยู่เบื้องหลัง

คุณสามารถทำได้โดยซ่อนภาพซ้อนทับดังนี้:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

ใช้ jQuery นี้

$("div").click(function(e){e.preventDefault();});

แทนที่ "div" ด้วยรหัสหรือองค์ประกอบ

ทางเลือกในการปิดใช้งานเหตุการณ์ทั้งหมด (หรือเจี๊ยบ) บน div คือ unbind () เหตุการณ์ทั้งหมดที่แนบมากับแท็กโดยค่าเริ่มต้น

  $('#myDivId').unbind();

หรือ

  $('#myDivId').unbind("click");