Beiträge von Veenom

    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
    1. var inside = document.getElementById("edge5");
    2. inside.addEventListener("mousemove", event => {
    3. event.stopPropagation();
    4. });

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

    Hallo Leute,


    ich versuche ein Event auszuführen


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


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


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


    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 :)

    Der von dir beschriebene Code funktioniert nicht :/


    Mein Problem ( jedenfalls in meinem ersten Code ) ist, dass die Variable in jeder Ihrer anonymen Funktionen an dieselbe Variable außerhalb der Funktion gebunden ist.

    Deshalb muss man die Variable in jeder Funktion an einen separaten, unveränderlichen Wert außerhalb der Funktion binden.

    Worin unterscheidet sich denn das Array [1,2,3]

    Ausgabe:


    My value: 0

    My value: 1

    My value: 2

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


    von dem Array [div.panel.panel-primary.shadow-primary, div.panel.panel-primary.shadow-primary]



    Ausgabe hier:


    Uncaught TypeError: funcs[j] is not a function





    Ich trenne doch bei beiden Beispielen ein Array in dessen Einzelteile und gebe es in der Konsole aus. Wieso funktioniert dass mit einem einfachen Integer aber nicht mit einem HTMLDIVElement?



    Kann es sein dass mein Code zwar korrekt ist aber ich von

    Code
    1. document.querySelectorAll

    kein Array zurück bekomme?
    Wenn dem der Fall ist wie kann ich das Objekt in ein Array umwandeln?

    Hallo Sempervivum,


    ja diesen Code hatte ich bereits in Verwendung.

    Dass ist nur leider eine Funktionalität, die in Javascript nicht möglich ist.

    Die For Loop, die du erstellst. Wird in deinem Beispiel genau ein Mal aufgerufen.
    Da die Maus aber nicht bein neuladen der Seite auf dem Element liegt,

    gibt dir die Maus genau ein mal beim neuladen das Element zurück, wie es ist wenn über dem Element kein Mauszeiger liegt.


    Solltest du also in deinem Code über eines der Elemente mit deinem Mauszeiger gehen, wird dir immer das letzte Element der For Loop angezeigt.


    Um dieses Problem zu beheben, habe ich versucht die Funktion außerhalb der For Schleife aufzurufen.
    Leider kommt es dabei zu meinem beschriebenen Fehler :/

    Ich möchte alle HTMLDivElemente der Klasse shadow-primary mit einer function abarbeiten. Ich möchte dafür jedoch kein HTML event verwenden sondern die Klasse mit javascript auslesen.

    Fürs erste möchte ich das HTML Element in Javascript ausgeben.

    Dass funktioniert ja.
    Nur habe ich Probleme bei dem Error der mir zurückgegeben wird.

    Erreichen möchte ich eine Funktion, die auf einem bestimmten Klassennamen beruht und immer wieder ausgeführt werden kann ( deshalb mouseover )

    Aufgabe dieser Funktion ist nicht relevant, deswegen hier nur:


    Code
    1. console.log(x);


    Gerne kannst du es selbst versuchen.

    Dass Array [1,2,3] wird durchlaufen und durch den Command console.log werden die Strings 1 / 2 / 3 nacheinander ausgegeben.


    In dem Hauptbeispiel jedoch versuche ich die selbe Funktion genau auszuführen.
    Über die Konsole sollte also, wenn man über das jeweilige DIV mit der Maus kommt, das selbe DIV ausgegeben werden.

    Leider scheitert es hier am Fehler:

    app.min.dsapp.js:12 Uncaught TypeError: shadow[j] is not a function

    at app.min.dsapp.js:12

    Hallo Leute,


    ich möchte gerne ein mouseover Event für eine vordefinierte Klasse erstellen.

    Ich habe dabei jedoch schwierigkeiten.


    Mein HTML Code sieht so aus:

    Code
    1. <div class="panel panel-primary shadow-primary">
    2. <div class="panel-heading">
    3. <h3 class="panel">CREATE2</h3>
    4. </div>
    5. </div>
    6. <div class="panel panel-primary shadow-primary">
    7. <div class="panel-heading">
    8. <h3 class="panel">CREATE1</h3>
    9. </div>
    10. </div>


    Jetzt kommt der JS Teil:



    app.min.dsapp.js:12 Uncaught TypeError: shadow[j] is not a function

    at app.min.dsapp.js:12


    Dass verstehe ich nicht. =O

    Wenn ich nähmlich


    Code
    1. var shadow = [1,2,3]


    verwende funktioniert es.

    Kann mir hier jemand weiterhelfen? :)