Beiträge von Veenom

Zitat von basti1012

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

Zitat von Sempervivum

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

Hallo Leute,

ich versuche ein Event auszuführen

<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.

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

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]

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [1,2,3]

for (var i = 0; i < funcs.length; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < funcs.length; j++) {
  funcs[j]();
}

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]

function log(x) {
  console.log('My value: ' + x);
}

var funcs = document.querySelectorAll('.shadow-primary');

for (var i = 0; i < funcs.length; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < funcs.length; j++) {
  funcs[j]();
}

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

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.

Nein ich will die HTMLDivElemente.

Deswegen ja der Code
Ich will nur wissen wieso ich die HTMLDivElemente nicht in der Konsole ausgegeben bekomme.

Ich habe es getestet und wenn ich die HTMLDivElemente einzeln ausgebe funktioniert es.

Nur nicht in der For Schleife.

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:

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:

<div class="panel panel-primary shadow-primary">
    <div class="panel-heading">
        <h3 class="panel">CREATE2</h3>
    </div>
</div>
<div class="panel panel-primary shadow-primary">
    <div class="panel-heading">
        <h3 class="panel">CREATE1</h3>
    </div>
</div>

Jetzt kommt der JS Teil:

function log(x) {
  x.onmouseover = function() {
    console.log(x);
  }
  x.onmouseout = function() {
    console.log(x);
  }
}

var shadow = document.getElementsByClassName('shadow-primary');

for (var i = 0; i < shadow.length; i++) {
  shadow[i] = log.bind(this, i);
}

for (var j = 0; j < shadow.length; j++) {
  shadow[j]();
}

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

at app.min.dsapp.js:12

Dass verstehe ich nicht.

Wenn ich nähmlich

var shadow = [1,2,3]

verwende funktioniert es.

Kann mir hier jemand weiterhelfen?