Eventhandler im Responsive Design

[matzebln]

Hallo Leute,

ich bin derzeit dabei meine Seite auf Responsive Design umzustellen.

Das klappt auch soweit ganz gut. Ich habe "eine" HTML-Seite, das CSS sauber in verschiedenen CSS-Datein und eine JS-Datei.

Was nun mein aktuelles Thema ist, das in der Desktop-Version "Mouseevents" stattfinden und in der Mobile/Phone-Version "Touchevents".

Beispiel: Meine Social-Button verfügen über einen Hovereffekt mithilfe von JS. In der Mobile-Version möchte ich nun das die Funktion auf "Touchevents" reagiert. Ich habe also neben den "Mouseevents" auch die "Touchevents" registriert. Doch JS scheint diese zu überschreiben und es funktioniert immer nur eines.

function hover() {
... tu etwas
}

addEventListener("Mouseevent", hover());
addEventListener("Touchevent", hover());

Meine Frage ist nun, wie löst ihr das (unabhängig von der Hoverfunktion die kann man auch über CSS realisieren)? Schreibt ihr eine Funktion für Touchevents und eine für Mouseevent?

Wir einen Hinweis wäre ich Dankbar.

Viele Grüße
Matze

 

[kkapsner]

Da sollte sich nichts überschreiben. Es kann aber passieren, dass beide Events feuern. Mach' doch mal ein lauffähiges Minimalbeispiel, das wir direkt ansehen können.

Aber wenn du das Ganze so aufrufst, wird die hover()-Funktion beim Initialisieren direkt aufgerufen. Du musst dem addEventListener eine Funktionsreferenz übergeben... oder gibt die hover() eine Funkion zurück?