HTML / CSS: Jadikan div "tidak terlihat" untuk diklik?

98

Untuk berbagai alasan, saya perlu meletakkan (kebanyakan) transparan di <div>atas beberapa teks. Namun, ini berarti teks tidak dapat diklik (mis., Untuk mengklik tautan atau memilihnya). Mungkinkah membuat div ini "tidak terlihat" untuk klik dan kejadian mouse lainnya?

Misalnya, overlaypenutup div mencakup teks, tetapi saya ingin dapat mengklik / memilih teks melalui 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>
html css events David Wolever
sumber
1
Jawaban singkatnya tidak. (Telah dibahas beberapa kali, tetapi korban penipuan sulit ditemukan untuk ini, tidak dapat memikirkan kata kunci yang baik ...) Untuk apa Anda membutuhkan DIV transparan?
Pekka
2
Saya tidak berpikir itu mungkin. Mungkin Anda menceritakan tentang "berbagai alasan" yaitu apa yang sebenarnya ingin Anda capai?
davehauser
1
@Null Saya akan menahan -1 sampai jelas apa yang OP ingin lakukan.
Pekka
1
NullUserException - Bagaimana apa yang dia usulkan akan menghentikan orang menyalin konten dari situsnya? Jika ada, dia mencoba melakukan yang sebaliknya - dia ingin meniadakan efek div transparannya (membuat teks lebih sulit untuk diklik dan dipilih).
Hammerite
@Hammer Anda benar. Saya menghapus suara negatif tersebut.
NullUserException

Jawaban:

159

Itu bisa dilakukan dengan menggunakan CSS pointer-events. Properti ini didukung di Firefox 3.6+, Chrome 2+, IE 11+, dan Safari 4+. Sayangnya, saya tidak memiliki pengetahuan tentang solusi lintas-browser.

#overlay {
  pointer-events: none;
}
Ionuț G. Stan
sumber
3
Ah, kelihatannya bagus! Sekarang, satu-satunya masalah adalah saya harus membuat beberapa anak menerima event pointer… Tapi mungkin saya bisa mengetahuinya. Terima kasih!
David Wolever
2
Keren: pointer-events: visibletampak seperti itu akan melakukan persis apa yang saya inginkan. Terima kasih!
David Wolever
Bekerja di chrome! Senang bahwa ini mungkin!
BT
Ada peristiwa penunjuk polyfill: github.com/kmewhort/pointer_events_polyfill
rink.attendant. 6
Jawaban paling sederhana dan paling tegas!
Jones G
0

Anda dapat melakukannya dengan menyembunyikan hamparan seperti ini:

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();
}
Donald Bebek
sumber
0

Gunakan jQuery ini

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

ganti "div" dengan ID atau elemen

Dean Van Greunen
sumber
-1

Alternatif untuk menonaktifkan semua event (atau chick) pada div adalah unbind () semua event yang dilampirkan dengan tag secara default 

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

atau

  $('#myDivId').unbind("click");
Muhammad Nasir
sumber
jquerysekarang menggunakan off()untuk mendukung unbind(), dan hanya menghapus penangan, tidak mencegah div menangkap klik.
pmoleri