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


99

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

1
Kısa cevap hayır. (Birkaç kez tartışıldı, ancak bunun için kopya bulmak zordur, iyi anahtar kelimeler düşünemiyorum ...) Şeffaf DIV'ye ne için ihtiyacınız var?
Pekka

2
Bunun mümkün olduğunu sanmıyorum. Belki "çeşitli nedenlerden", yani gerçekten neyi başarmak istediğinizden bahsediyorsunuz?
davehauser

1
@Null OP'nin ne yapmak istediği netleşene kadar -1'i saklı tutardım.
Pekka

1
NullUserException - Önerdiği şey, insanların web sitesinden içerik kopyalamasını nasıl engelleyebilir? Bir şey olursa, tam tersini yapmaya çalışıyor - şeffaf div'inin (metnin tıklanıp seçilmesini zorlaştıran) etkisini ortadan kaldırmak istiyor.
Hammerite

@ Hammer Haklısın. Olumsuz oyu kaldırdım.
NullUserException

Yanıtlar:


161

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

3
Ah, bu iyi görünüyor! Şimdi, tek sorun, bazı çocukları işaretçi olayları kabul ettirmem gerekiyor… Ama belki bunu çözebilirim. Teşekkürler!
David Wolever

4
Harika: tam olarak istediğimi pointer-events: visibleyapacak gibi görünüyor . Teşekkürler!
David Wolever

Chrome'da çalışıyor! Bunun mümkün olduğunu seviyorum!
BT

Bir işaretçi olayları polyfill var: github.com/kmewhort/pointer_events_polyfill
rink.attendant.

En basit ve en kesin cevap!
Jones G


0

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

0

Bu jQuery'yi kullanın

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

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


-1

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");

jqueryartık işleyicileri off()lehine kullanıyor unbind()ve yalnızca işleyicileri kaldırıyor, div'in tıklamayı yakalamasını engellemez.
pmoleri
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.