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

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

2

Ini dapat dilakukan dengan menghentikan acara setelah Anda menyembunyikan sementara overlay.

Lihat jawaban pertama untuk pertanyaan ini: "hamparan" HTML yang memungkinkan klik masuk ke elemen di belakangnya

— Joeri Sebrechts
sumber

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