HTML / CSS: Ein Div für Klicks „unsichtbar“ machen?

98

Aus verschiedenen Gründen muss ich einen (meistens) transparenten <div>Text einfügen. Dies bedeutet jedoch, dass auf den Text nicht geklickt werden kann (z. B. um auf Links zu klicken oder ihn auszuwählen). Wäre es möglich, dieses Div für Klicks und andere Mausereignisse einfach "unsichtbar" zu machen?

Zum Beispiel overlaydeckt das Div-Cover den Text ab, aber ich möchte in der Lage sein, den Text über das overlayDiv anzuklicken / auszuwählen :

<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
quelle
1
Die kurze Antwort lautet nein. (Wurde mehrmals diskutiert, aber Dupes sind dafür schwer zu finden, können sich keine guten Schlüsselwörter vorstellen ...) Wofür benötigen Sie den transparenten DIV?
Pekka
2
Ich denke nicht, dass das möglich ist. Vielleicht erzählen Sie über die "verschiedenen Gründe", dh was Sie wirklich erreichen wollen?
Davehauser
1
@Null Ich würde die -1 zurückhalten, bis klar ist, was das OP tun will.
Pekka
1
NullUserException - Wie würde das, was er vorschlägt, Menschen davon abhalten, Inhalte von seiner Website zu kopieren? Wenn überhaupt, versucht er das Gegenteil zu tun - er möchte den Effekt seines transparenten Div vermeiden (das Klicken und Auswählen von Text wird schwieriger).
Hammerite
@Hammer Du hast recht. Ich habe die Ablehnung entfernt.
NullUserException

Antworten:

159

Dies kann mit CSS erfolgen pointer-events. Diese Eigenschaft wird in Firefox 3.6+, Chrome 2+, IE 11+ und Safari 4+ unterstützt. Leider kenne ich keine browserübergreifende Problemumgehung.

#overlay {
  pointer-events: none;
}
Ionuț G. Stan
quelle
3
Ah, das sieht gut aus! Das einzige Problem ist, dass ich einige der Kinder dazu bringen muss , Zeigerereignisse zu akzeptieren … Aber vielleicht kann ich das herausfinden. Vielen Dank!
David Wolever
2
Cool: pointer-events: visibleSieht so aus, als würde es genau das tun , was ich will. Vielen Dank!
David Wolever
Funktioniert in Chrom! Liebe, dass dies möglich ist!
BT
Es gibt eine
Zeigerereignis-Polyfüllung
Einfachste und direkteste Antwort!
Jones G
0

Sie können dies tun, indem Sie das Overlay wie folgt ausblenden:

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 Duck
quelle
0

Verwenden Sie diese jQuery

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

Ersetzen Sie "div" durch die ID oder das Element

Dean Van Greunen
quelle
-1

Eine Alternative zum Deaktivieren aller Ereignisse (oder Chicks) auf einem Div ist das Aufheben () aller Ereignisse, die standardmäßig mit Tags verbunden sind 

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

oder

  $('#myDivId').unbind("click");
Muhammad Nasir
quelle
jqueryJetzt verwendet off()zugunsten unbind()und entfernt nur die Handler, verhindert nicht, dass das div den Klick erfasst.
pmoleri