Öffnen Sie die Konsole. Klicken Sie auf Produkte oder Team, klicken Sie dann mal auf einen Unterpunkt. Ein Klick auf die Links zeigt das eigentliche Element, welches angeklickt wurde. Das ist das event.target Der click Event wurde jedoch auf das übergeordnete Listenelement mit dem Klassennamen foo registriert. Das ist das currentTarget.

Das Problem in diesem Beispiel ist, dass ein Klick auf einen Unterpunkt das Menü auch wieder zuklappt. Das liegt daran, dass auch der Unterpunkt dem Selektor entspricht. <li class="foo">Hauptpunkt<ul><li>unterpunkt</li></ul></li>

Damit das nicht passiert, kann man überprüfen, ob auf ein li Element geklickt wurde oder auf einen link. Wenn man also das Menü in anderer Form anklegen will muss man diese Überprüfung in irgendeiner Form vornehmen.

Beispiel 1

Beispiel 2

Oder anstatt ein Überprüfung vorzunehmen, wählt man anstatt this event.target und von da aus wählt man eine untergordnete Liste

Beispiel 3