document.addEventListener auf alle Elemente bis auf einer div box

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

basti1012

Erfahrenes Mitglied
Ich will ein Script schreiben, was unter der Mause Elemente ausliest.
Das klappt auch alles kein Problem.

Der Inhalt mit paar Informationen sollen in einer Infobox angezeigt werden.
In der besagten Box soll auch noch ein Button rein, der den Inhalt weiter verarbeiten soll.

Durch das globale mousedown Event wird beim click auf den Button dann der Inhalt von der Box wieder in der Box angezeigt.

Meine Erklärungen sind Mist , ich weiß.
Kurz gesagt
Bei diesem Code will ich das beim Klick in der Box die Box keinen roten Border bekommt.

Geht das überhaupt ?
Pointer.event:none und so was kommt nicht in Frage weil die Box noch einen Button bekommt

HTML:
<body>
  <div id="box">Dieses Element soll bei mousedown event nicht reagieren</div>
  <p>
    inhalt
  </p>
  ....
</body>
<script>
  document.addEventListener("mousedown", function(e) {
    let ueber_ele = document.elementFromPoint(e.clientX, e.clientY);
    ueber_ele.style.border = '2px solid red';
  })
</script>



Demo Code etwas größer
https://codepen.io/basti1012/pen/VwBrpOJ?editors=1000
 
Da brauchst Du nur die ID der Box abzufragen:
Code:
    document.addEventListener("mousedown", function(e) {
      let ueber_ele = document.elementFromPoint(e.clientX, e.clientY);
      if (ueber_ele.id != 'box') {
        ueber_ele.style.border = '2px solid red';
      }
    });
 
Oh man. Da habe ich wieder viel zu kompliziert gedacht.

Als Notlösung wollte, ich die Box mit createlement erstellen , nachdem der eventlistener alle Boxen durchgegangen wäre , das hätte wahrscheinlich auch geklappt. Aber so ist besser , Danke
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück