Klaus1: Klick auf Link löst auch OnClick-Event vom darunterliegenden Div aus. Zu Verhindern?

Hallo,

Auf einer bestehenden Seite sind auf mehreren DIV Elementen ein onClick-Event definiert. Der Besucher wählt darüber bestimmte Module an oder ab.

Wenn auf dem Div aber auch bspw. ein Link liegt oder auch ein weiteres Div mit onClick-Event, dann wird immer auch das onClick des DIV Elements gefeuert.

Gibt es eine Möglichkeit dies zu verhindern bzw. zu unterbinden?

Im Beispiel soll der Alert nicht ausgelöst werden:

<div id="a" onClick="alert('test');">
   <a id="b" href="#">klick mich</a>
</div>

LG Klaus

  1. Hey,

    Im Beispiel soll der Alert nicht ausgelöst werden:

    <div id="a" onClick="alert('test');">
       <a id="b" href="#">klick mich</a>
    </div>
    
    

    So muss das auch sein, da man ja nicht nur den Link klickt sondern auch gleichzeitig den Container.

    Gibt es eine Möglichkeit dies zu verhindern bzw. zu unterbinden?

    Ja.
    Erstens ein div ist kein klickbares Element, zumindest sollte es dies am besten nicht sein. Zweitens, ein Eventhandler für den Link erstellen. Auch wenn das bei einer bestehenden Seite sicher mühsam ist, ist es dennoch die beste Methode.

    Gruß
    Jo

  2. Hallo Klaus1,

    es ist grundsätzlich falsches Design, Klicks auf ein div zur Steuerung einzusetzen. Das Problem besteht darin, dass die Seite dann eine Tastaturnutzung ausschließt, sprich: einen Fehler in der Bedienbarkeit hat.

    Das, was Dir gerade auf die Füße fällt, ist ein anderes Problem: Click-Ereignisse unterliegen dem Event-Bubbling, d.h. nach dem Element, auf das geklickt wurde, läuft das Event auch an allen Eltern-Elementen vorbei. Es gibt zwei Möglichkeiten, damit umzugehen:

    1. Unterbinde das bubbling des Events - dazu müsstest Du einen Event-Listener auf dem a Element haben, der auf dem Event-Objekt die stopPropagation Methode aufruft. Das ist aber sehr umständlich, weil Du ja für deine Fachfunktionen gar keinen Eventhandler auf dem a Element brauchst.
    2. Erkenne im click-Handler für das div, ob der Klick für das div bestimmt war oder für ein Kind-Element des div (mittels der target und currentTarget-Eigenschaften des Event-Objekts).

    Aber noch besser ist es, wenn Du zum an- und abwählen Buttons einsetzt, die sind bedienbar und dafür gedacht, Funktionen auf der Seite auszulösen. Es ist auch intuitiver, einen Button zu klicken, statt irgendwohin in ein div. Die Alternative Checkbox zum Button wäre auch noch zu betrachten - als "Ein-/Ausschalter" ist eine Checkbox eigentlich ganz praktisch; und per CSS kannst Du eine nicht angehakte Checkbox auch dazu verwenden, die Inhalte der Module zu verstecken oder zu deaktivieren. Das hängt jetzt von deinen Anforderungen ab.

    Ein click-Event auf ein div zu registrieren ist nicht prinzipiell falsch. Aber es nicht dafür gedacht, Klicks auf das div selbst zu verarbeiten. Wenn ich bspw. ein DIV habe mit 17 Buttons drin, von denen ggf. noch welche dynamisch hinzukommen, dann kann ich das click Event auf dem div registrieren und bekomme mit einer Registrierung alle Events mit, und das sogar für Buttons, die nach der Registrierung dazu gekommen sind. Über die target-Eigenschaft des event-Objekts, das ein click-Handler bekommt (wenn man ihn über addEventListener registriert) findet man dann den geklickten Button heraus.

    Bei einer Event-Registrierung über das onclick-Attribut musst Du Dir das Event-Objekt beschaffen, sonst hat der Handler es nicht zur Verfügung. Das geht so:

    <div onclick="moduleClicked(event)">
    ...
    </div>
    

    Die Variable event enthält in dem Moment, wo der Klick verarbeitet wird, das Event-Objekt. Ein mit addEventListener registrierter Handler bekommt das Event-Objekt automatisch.

    Eine generische Modulsteuerung würde diesen click-Handler auch nicht auf jedem Modul registrieren, sondern auf dem gemeinsamen Container aller Module. Wenn dieser click-Handler dann feststellt, dass ein Button gedrückt wurde der ein Modul ein/ausschaltet, sucht er in der Eltern-Hierarchie des Buttons das betreffende Modul-Div (welches bspw. an einer class erkennbar wäre) und führt dann die Aktivierung oder Deaktivierung durch. Eine Registrierung, eine Funktion, kein Schmutz im HTML.

    Eventuell wäre dann auch das section-Element eine gute Alternative zum div.

    Rolf

    --
    sumpsi - posui - clusi
    1. Ich hab die Seite nicht erstellt, sondern muss jetzt nachträglich etwas zusätzliches einbauen bzw. hat sich es jetzt ergeben, dass zusätzlich ein Link angezeigt wird, wo vorher ausschließlich Text stand.

      Wie auch immer, ich bin bei dem Tipp mit dem Event-Objekt fündig geworden und habe es mit einem event.stopPropagation gelöst bekommen.

      Mag sein, dass das jetzt Quick&Dirty ist, aber ich muss mich nicht um barrierefreien Zugriff kümmern, da es nur interne Techniker betrifft.

      Vielen Dank für die Hilfe.

      1. Hallo Klaus1,

        solange die internen Techniker immer eine Maus zur Hand haben...

        Aber du hast natürlich Recht, eine bestehende Seite zu sanieren kostet viel Geld und das muss erstmal einer lockermachen. Viel Glück bei der Sponsorensuche 😉

        Rolf

        --
        sumpsi - posui - clusi
        1. @@Rolf B

          solange die internen Techniker immer eine Maus zur Hand haben...

          Und immer eine Hand dafür freihaben. “Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

          Und keinen Unfall haben, durch den sie eingeschränkt werden. Die müssen dann nach jahrelanger guter Arbeit leider fristlos entlassen werden, da sie den Anforderungen, welche die (Un)bedienbarkeit der Applikation an sie stellt, leider nicht mehr gewachsen sind.

          Merkt ihr selber, dass „ich muss mich nicht um barrierefreien Zugriff kümmern, da es nur interne Techniker betrifft“ Unsinn ist?

          Aber du hast natürlich Recht, eine bestehende Seite zu sanieren kostet viel Geld und das muss erstmal einer lockermachen.

          Weitaus besser ist es, es gleich richtig zu machen.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. @@Klaus1

    Auf einer bestehenden Seite sind auf mehreren DIV Elementen ein onClick-Event definiert.

    divs kann man nicht clicken. (Einige Nutzer können das; aber eben nicht „man“.)

    Es ist generell nicht die beste Idee, interaktive Elemente zu verschachteln, also einen clickbaren Bereich innerhalb eines anderen clickbaren Bereichs vorzusehen.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann