Mausklick auf korrekte Ebene zwingen

J

jemand anders

Erfahrenes Mitglied
Hallo,

Gibt es noch eine andere, einfachere Möglichkeit um zu verhinden, dass bei einem Klick auf d2 auch gleichzeitig ein Klick auf d1 ausgelöst wird?

Vielen Dank.

Freundl. Grüße


HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>
    <style>
      .d1 {
        background: #ccc;
        height: 200px;
        width: 200px;
      }
      .d2 {
        background: #aaa;
        height: 100px;
        width: 100px;
        z-index: 100;
      }
    </style>
  </head>

  <body>
    <div class="d1">
      d1
      <div class="d2">d2</div>
    </div>
    <p>Klick auf Div, Meldung in Konsole…</p>
    <p>
      <script>
        document.querySelector('.d1').addEventListener('click', function (e) {
          console.log('.d1 geklickt', e.target)
        })
        document.querySelector('.d2').addEventListener('click', function (e) {
          if (e.target.classList.contains('.d2')) {
            console.log('.d2 geklickt')
          }
        })
      </script>
    </p>
  </body>
</html>
 
Zuletzt bearbeitet:
Nachfrage:

Hast du eine Ahnung, ob wie man e.stopPropagation im folgenden Beispiel verwenden kann? Ich sehe nicht, wie man da an den Event kommt.

Also
HTML: 
<script>
let myVal='abc';
myCode = `<button onclick="functionA('${myVal}')">Click me</button>`;
document.querySelector('body').insertAdjacentHTML('beforeend',myCode);
</script>
 
Zuletzt bearbeitet:
Du kannst das event als weiteren Parameter übergeben:
Code: 
        function functionA(event, param) {
            console.log(event, param);
        }
        let myVal = 'abc';
        myCode = `<button onclick="functionA(event, '${myVal}')">Click me</button>`;
        document.querySelector('body').insertAdjacentHTML('beforeend', myCode);
Allerdings finde ich das Gemisch von Hochkommas sehr unübersichtlich. Ich würde es vorziehen, auch hier mit addEventListener zu arbeiten:
Code: 
        function functionA(event) {
            // Wurde der Button geklickt?
            if (event.target.classList.contains('btn')) {
                console.log(event, myVal);
            }
        }
        let myVal = 'abc';
        myCode = `<button class="btn">Click me</button>`;
        document.querySelector('body').insertAdjacentHTML('beforeend', myCode);
        // Wir brauchen nur die Referenz unserer Funktion zu übergeben,
        // Javascript übergibt beim Aufruf automatisch das Event:
        document.addEventListener('click', functionA);
Das hat zusätzlich den Vorteil, dass es auch funktioniert, wenn erst irgend wann später das HTML eingefügt oder geändert wird.
 
PS: Wenn ich da weiter drüber nachdenke, scheint mir dies für den ersten Ansatz besser zu sein:
Code: 
        myCode = `<button onclick="functionA(event, myVal)">Click me</button>`;
Vor allem funktioniert das auch dynamisch: Ändert sich der Wert der Variablen myVal wird bei einem erneuten Klick wieder der aktuelle Wert übergeben.
 
Javascript: 
 myCode = `<button onclick="functionA(event, '${myVal}')">Click me</button>`;
Wenn die Sache nur einmal ausgeführt würde, okay. Aber es ist eine Schleife über möglicherweise mehr als tausend Elemente, und da ich keinen Key habe, müsste ich dann immer über alle drüberrödeln. So ist absolut perfekt! Danke Dir.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück