Element nicht anklickbar machen (Dinge dahinter anklicken)

90

Ich habe ein festes Bild, das eine Seite überlagert, wenn der Benutzer gerade einen Touchscreen (mobil) scrollt.

Ich möchte dieses Bild "nicht anklickbar" oder "inaktiv" oder was auch immer machen, damit die Seite dahinter, wenn ein Benutzer dieses Bild berührt und davon zieht, immer noch einen Bildlauf durchführt, als ob das Bild nicht da wäre und die Interaktion "blockiert".

Ist das möglich? Bei Bedarf könnte ich versuchen, Screenshots zu erstellen, die veranschaulichen, was ich meine.

Vielen Dank!

html css mobile scroll touch hannebaumsaway
quelle

Antworten:

174

Einstellen von CSS - pointer-events: nonesollte jegliche Mausinteraktion mit dem Bild entfernen. Unterstützt ziemlich gut in allen außer IE.

Hier ist eine vollständige Liste der Werte, die angenommen werden pointer-eventskönnen.

Chris Brown
quelle
2
Perfekt! Ich war vorher noch nicht begegnet pointer-events, genau das habe ich gesucht. Danke dir!
Hannebaumsaway
1
@Dusty Kinda macht Sinn, Sie deaktivieren Mausinteraktionen, möchten aber Mausinteraktionen. Was ist Ihr spezifischer Anwendungsfall? Aus einer UX-Perspektive scheint dies nicht intuitiv zu sein, da der Zeiger impliziert, dass das Element anklickbar ist. Wenn Sie eine JSFiddle zusammenwerfen, kann ich einen Blick darauf werfen.
Chris Brown
@ChrisBrown der Cursorwechsel war ein wenig drängelnd. Hier ist ein bisschen von dem, was ich mir ausgedacht habe: jsfiddle.net/cxwvdos0 Etwas verrückt, nur um eine Schaltfläche für eine Sekunde zu deaktivieren und den Cursor nicht ändern zu lassen. jQuery unbindund bindich hätten funktioniert, wenn ich meine anonymen Funktionen konvertieren wollte. Vielen Dank für die Antwort!
Dusty
16

CSS Pointer Events ist das, was Sie sich ansehen möchten. Setzen Sie in Ihrem Fall Zeigerereignisse auf "keine". Schauen Sie sich diese JSFiddle für ein Beispiel an ... http://jsfiddle.net/dppJw/1/

Beachten Sie, dass ein Doppelklick auf das Symbol weiterhin anzeigt, dass Sie auf den Absatz klicken.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
Terry
quelle
1
Danke für das Beispiel!
Hannebaumsaway
Ein einfacher Klick * und das Codebeispiel (Klicken auf das Symbol) funktionieren in FF 68.0 nicht für mich.
Andrew
3

Wenn Sie JavaScript verwenden möchten:

document.getElementById("x").style.pointerEvents = "none";
<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>
Erweitern Sie das Snippet

Husam Ebish
quelle