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:
Javascript: 
        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:
Javascript: 
        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.
 
Zuletzt bearbeitet von einem Moderator:
PS: Wenn ich da weiter drüber nachdenke, scheint mir dies für den ersten Ansatz besser zu sein:
Javascript: 
        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.
 
Zuletzt bearbeitet von einem Moderator:
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.
 
Hi,
` stopPropagation` kannst Du auch per CSS mit pointer-events realisieren.
auf dem oberen `pointer-events: none;` und auf das zweite `pointer-events: all;`.

Und beim Button nimm das onclick raus und mach das mit einem Eventlistener. Das ist sauberer und sicherer.
Und auch wenns aufwendiger ist der ausbere Weg der den Button per JS zu erzeugen.
Javascript: 
let btnContainer = document.getElementById('btnContainer');
let newButton = document.createElement('button');
newButton.setAttribute('id', 'newBtn');
newButton.setAttribute('class', 'btn'); 
newButton.textContent = 'Value';

bntContainer.appendChild(newButton);
newButton.addEventlistener('click', yourFunction);
 
Hallo,

danke für die Rückmeldung.

Sicherer, weil jemand den Code manipulieren könnte?
Aber da besteht keine Gefahr. Es werden nur Daten angezeigt.

Fr. Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück