Ha! Freitag! Das Wochenende ist in greifbarer Nähe! Es wird mal wieder Zeit für einen Beitrag der Kategorie Freaky Friday. Heute beschäftigen wir uns mal mit dem Thema Ghost Clicks und einer möglichen Lösung für dieses Phänomen.
Was sind Ghost Clicks?
Gerade bei der Programmierung von Web Applications (Web Apps) sind einige Hürden zu nehmen. Unter anderem wird man als Entwickler hier auch hin und wieder mit dem Ghost Click Phänomen konfrontiert. Eigentlich ist es kein Phänomen, sondern eher eine logische Konsequenz aus der Kreuzung von Webseiten mit Desktop PCs und mobilen Endgeräten. Ghost Clicks treten bei Javascript Event Observern auf. Legt man zum Beispiel einen Click Event Observer auf ein HTML Element, kann es sein, dass dieser Click auf mobilen Endgeräten doppelt ausgeführt wird. Ein praktisches Beispiel wäre zum Beispiel ein Link, der bei einem Click ein Element mit einem Slide Effekt öffnen soll und bei einem erneuten Click das gleiche Element wieder schließen soll. Der Ghostlick sorgt dafür, dass zwei Clicks ausgeführt werden. Somit wird das Element sich öffnen und sich gleichzeitig auch wieder schließen.
Warum gibt es Ghost Clicks?
Bei der Entwicklung von Web Apps muss man einiges beachten. Unter anderem auch, dass eine Website, die sowohl auf einem Desktop PC mit großer Auflösung als auch auf einem Mobiltelefon mit weitaus kleinerer Auflösung funktionieren muss. Auf mobilen Endgeräten gibt es aber in diesem Sinne nicht nur Click Events, sondern auch extra für diese Geräte entwickelte Touch Events. Ein Element, welches auf einen Click mit einer Mouse reagieren soll, soll höchstwahrscheinlich auch auf einen Fingertipp auf einem Touch Display reagieren. Somit müssen zwei Events bedient werden, die, sofern man das Ghost Click Phänoment nicht beachtet, fast zeitgleich ausgeführt werden. Ein einfaches Aufklappen von Elementen wird somit zur echten Herausforderung. Also … manchmal zumindest.
Eine genaue Erklärung zum Zusammenspiel von Touch und Click Events findet ihr auf MediaEvent.
Wie könnte eine Lösung des Ghost Click Phänomens aussehen?
Im Folgenden seht ihr einen Lösungsansatz anhand des schon benannten Beispiels eines ausfahrbaren Elements mit HTML und Javascript / jQuery.
Informationen anzeigen
Ein simpler HTML Schnippsel soweit.
Unser Javascript Code dazu sieht wie folgt aus:
var dragging = false;
var flag = false;
$('body').on('touchmove', function( event ) {
dragging = true;
});
$('body').on('touchstart', function('event') {
dragging = false;
});
$('#event-ausloeser').on('touchend click', function( event ) {
if (flag == false) {
flag = true;
setTimeout(function() {
flag = false;
}, 500);
if (!dragging) {
$('#info-container').slideToggle();
}
}
return false;
});
Was macht unser Javascript? Zunächst prüfen wir mittelst des touchmove Events, ob ein Element einfach gezogen, anstatt einfach mit dem Finger angeklickt wird. Wir möchten ja einfach nur, dass unser Info Container nur ausgeklappt wird, wenn jemand mit der Mouse auf den Link klickt oder ihn mit dem Finger berührt. Wir schließen das Ziehen eines Elements also als Auslöser für das Aus- oder Einklappen unserer Info Box aus. Als nächstes legen wir unsere Events auf den Information anzeigen Link. Hierzu benötigen wir ein Flag, welches uns signalisiert, ob ein Event ausgeführt wurde. Auf mobilen Endgeräten wird grundsätzlich das touch Event zuerst ausgeführt. Wir müssen unserem Code also mitteilen, dass das Click Event nicht ausgeführt werden muss, wenn Touchend vorher schon durchgelaufen ist. Das Flag setzen wir nach 500 Millisekunden wieder auf true, so dass der Link wieder klickbar wird. Unser Container sollte also sowohl auf Deskopt Auflösungen als auch über mobile Endgeräte mit Touch Funktionen sauber funktionieren.
Logischerweise ist dies nicht die einzige Lösung für das Ghost Click Phänomen. Es gibt hier noch einige andere Ansätze. Ein Ansatz wäre zum Beispiel das touchend Event mit preventDefault() zu belagen. Leider zeigte diese Variante in verschiedenen Browsern auch verschiedene Ergebnisse und verhinderte den Ghost Click leider nicht konsequent.