HTML / CSS: Tıklamalara bir div "görünmez" mi yapılsın?

Çeşitli nedenlerden dolayı, <div>bazı metnin üzerine (çoğunlukla) şeffaf bir yazı koymam gerekiyor . Ancak bu, metnin tıklanamayacağı anlamına gelir (örneğin, bağlantıları tıklamak veya seçmek için). Bu div'i tıklamalar ve diğer fare olayları için "görünmez" yapmak mümkün olabilir mi?

Örneğin, overlaydiv metni kapsar, ancak overlaydiv aracılığıyla metni tıklayıp / seçebilmek istiyorum :

<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>

CSS kullanılarak yapılabilir pointer-events. Bu özellik Firefox 3.6+, Chrome 2+, IE 11+ ve Safari 4+ sürümlerinde desteklenmektedir. Maalesef, tarayıcılar arası bir geçici çözüm konusunda bilgim yok.

#overlay {
  pointer-events: none;
}

Kaplamayı geçici olarak gizledikten sonra olayı yeniden düzenleyerek yapılabilir.

Bu sorunun ilk cevabına bakın: Tıklamaların arkasındaki öğelere düşmesini sağlayan HTML "yer paylaşımı"

Bindirmeyi şu şekilde gizleyerek bunu yapabilirsiniz:

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

Bu jQuery'yi kullanın

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

"div" kısmını kimlik veya öğeyle değiştirin

Bir div'deki tüm olayları (veya civciv) devre dışı bırakmanın alternatifi, varsayılan olarak etiketlere eklenmiş tüm olayların bağını çöz () seçeneğidir.

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

veya

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