Möchte man auf einem HTML-Element (bzw. DOM-Element) einen einfachen und einen Doppel-Klick registrieren und
jeweils unterschiedliche Aktionen ausführen, steht man schnell vor einem Problem. Es gibt zwar ‘onclick’ und ‘ondblclick’ jedoch
löst ein Doppel-Klick immer auch einen einfachen Klick mit aus. Die Lösung besteht darin, nach einem einfachen Klick ein definierte Zeit zu warten und erst, wenn in dieser Zeit kein Doppel-Klick Event aufgetreten ist, die Aktion für den einfachen Klick wirklich auszuführen.
Tritt in dieser Zeit jedoch ein Doppel-Klick auf, wird die Aktion nicht durchgeführt und stattdessen die Aktion des Doppel-Klicks prozessiert. Mit Hilfe des beliebten Javascript Frameworks Prototype kann man dafür leicht eine generische Lösung entwickeln, die diese beiden Events für ein Element oder mehrere registriert:
var FunkyTools = { /* Registriert einen einfachen klick und einen Doppel-Klick auf den selben Elementen. * Stellt sicher, dass bei einem Doppel-Klick nicht auch der Event-Handler des einfachen * Klicks getriggert wird (gilt nur für den Event-Handler der über diese Methode * für den einfachen Klick registriert wurde). * * Parameter: * * element = ein DOM-Element, ein String(id des Elementes) oder ein Array * mit DOM-Elementen bzw. Strings(id der Elemente). * singleClickFunc = der Even-Handler für einfache Klicks * dblClickFunc = der Even-Handler für doppelte Klicks * * */ registerClicks: function(element, singleClickFunc, dblClickFunc) { var elements = $(element); if (! Object.isArray(elements)) { elements = [element]; } elements.each(function(element){ var doubleClick = false; element.observe('click', function(event){ doubleClick = false; singleClickFunc.wrap(function(proceed, event){ if (doubleClick) { event.stop(); } else { proceed(event); } }).delay(0.3, event); }); element.observe('dblclick', dblClickFunc.wrap(function(proceed, event){ doubleClick = true; proceed(event); })); }); } } |
