Javascript event nur auf überliegendem Element ausführen

  • Hallo Leute,


    ich versuche ein Event auszuführen


    Code
    <div id="test" style="width:1000px;height:100px;">
        <div id="edge5" class="panel panel-default b-a-0 bg-warning" style="top: 50px; left: 55px; position: absolute; width: 250px; background:blue;">
            test
        </div>
    </div>


    Ich möchte eine beliebige Funktion ausführen, wenn die Maus über dem Hintergrund des Elements mit der ID ="test" liegt.


    Code
    var test = document.getElementById("test");
    content.addEventListener("mousemove", event => {
      console.log("1");
    });


    Da dass Element mit der ID "edge5" auch in dem Element mit der ID "test" liegt, wird die funktion natürlich auch ausgeführt, wenn ich mit der Maus über dass Element "edge5" gehe.


    Das möchte ich jedoch nicht. Die Funktion soll nur ausgerufen werden, wenn ich mit der Maus durch das Überliegende Element streife, das andere jedoch nicht berühre.

    Ist dass möglich und wenn ja wie?


    Danke für die Hilfe :)

  • da id test das ElternElement ist reagiert das Event natürlich auch wenn man über Id Edge5 geht.

    Weil ist ja gleichzeitig die test Id die du mit der Mouse hoverst.


    Kannst du die Container ändern ?

    Also die html anordnung ?

  • Ja, das ist möglich und zwar indem Du das Event-Bubbling durch Aufruf der Funktion stopPropation() für das #edge5 unterbindest:

    Code
            var inside = document.getElementById("edge5");
            inside.addEventListener("mousemove", event => {
                event.stopPropagation();
            });
  • da id test das ElternElement ist reagiert das Event natürlich auch wenn man über Id Edge5 geht.

    Weil ist ja gleichzeitig die test Id die du mit der Mouse hoverst.


    Kannst du die Container ändern ?

    Also die html anordnung ?

    Die Anordnung ist leider nicht Änderbar


    Ja, das ist möglich und zwar indem Du das Event-Bubbling durch Aufruf der Funktion stopPropation() für das #edge5 unterbindest:

    Code
            var inside = document.getElementById("edge5");
            inside.addEventListener("mousemove", event => {
                event.stopPropagation();
            });

    Danke insofern es nicht anders möglich ist werde ich es so umsetzten :)

  • Natürlich ist es auch anders möglich. Nachteil der gezeigten Variante ist, dass ich das für jedes Element innerhalb von test machen muss. Hier haben wir nur eins, da geht das, aber was wenn weitere Container reinkommen?!


    Die Alternative sieht so aus, dass Du einfach das target abfragst, bevor Du die eigentliche Aktion ausführst:

    JavaScript
    document.getElementById( 'test' ).addEventListener( 'mouseover', function(e) {
    
        if ( e.target.getAttribute('id') == 'test' )
            console.log( 'whatever' );
    
    });

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!