HTML / CSS: Làm cho một div "ẩn" đối với các nhấp chuột?

Vì nhiều lý do khác nhau, tôi cần đặt (chủ yếu) trong suốt <div>trên một số văn bản. Tuy nhiên, điều này có nghĩa là không thể nhấp vào văn bản (ví dụ: để nhấp vào liên kết hoặc chọn nó). Có thể chỉ đơn giản làm cho div này "vô hình" với các lần nhấp chuột và các sự kiện chuột khác không?

Ví dụ: overlaydiv bao phủ văn bản, nhưng tôi muốn có thể nhấp / chọn văn bản thông qua 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>

Nó có thể được thực hiện bằng cách sử dụng CSS pointer-events. Thuộc tính này được hỗ trợ trong Firefox 3.6+, Chrome 2+, IE 11+ và Safari 4+. Rất tiếc, tôi không có kiến ​​thức về cách giải quyết trên nhiều trình duyệt.

#overlay {
  pointer-events: none;
}

Nó có thể được thực hiện bằng cách kích hoạt lại sự kiện sau khi bạn tạm thời ẩn lớp phủ.

Xem câu trả lời đầu tiên cho câu hỏi này: "lớp phủ" HTML cho phép các nhấp chuột chuyển qua các phần tử đằng sau nó

Bạn có thể thực hiện việc này bằng cách ẩn lớp phủ như sau:

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();
}

Sử dụng jQuery này

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

thay thế "div" bằng ID hoặc phần tử

Thay thế để vô hiệu hóa tất cả các sự kiện (hoặc chick) trên div là hủy liên kết () tất cả các sự kiện được gắn với thẻ theo mặc định

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

hoặc là

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