• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Warum wird bei mousemove gleichzeitig mouseout getriggert?

B

baserider

New member
Wenn ich die Maus über ein Bild bewege, dann wird in der Konsole jeweils mousemove und mouseut ausgegeben. Weshalb passiert das? Bei mousemove sollte doch nicht mouseout getriggert werden?

Sobald ich die Zeile hint.css('display','block'); entferne, dann ist das Verhalten wieder normal.

Code: 
var hint = $('<div class="hint">');

$('body').append(hint);

$('img').on('mousemove',function(e) {

  console.log('mousemove');
  var x = e.pageX;
  var y = e.pageY;

  hint.css('left', x + 'px');
  hint.css('top', y + 'px');
  hint.css('display','block');

}).on('mouseout',function(e) {
    console.log('mouseout');
});
 
Zuletzt bearbeitet:
mousout ? besser mouseout :) oder es liegt am img? besser eine ID oder Klasse vergeben.

HTML: 
<!DOCTYPE html>

<html>
	<head><title></title>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<style>
h3{width:250px;height:80px;margin:auto; background-color:#356;}
		</style>
	</head>
	<body>
	<h3>Hallo Ausgabe</h3>

		<script>
var hh = document.querySelector('h3');
hh.addEventListener('mousemove',function(){console.log("Mousemoved");});
hh.addEventListener('mouseout',function(){console.log("Mouseoutside");});
		</script>
	</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Das habe ich auch schon schon versucht :) So wie der Code bei dir ist, so hatte ich ihn auch gehabt. Bei mir ist das Problem die Zeile, die ich oben angegeben hatte.

Code: 
hint.css('display','block');

Dann werden auf einmal immer beide Events getriggert. Das Element soll aisgeblendet werden (display: none) und eingeblendet (display: block). Standardmäßig ist es ausgeblendet
 
Zuletzt bearbeitet:
Du verschiebst dein div bei mousemove immer an die Position des Mauszeigers dann wirds ein mouseout


versezte das div mal um ein paar px.
Code: 
 hint.css('left', (x-5) + 'px');
 hint.css('top',(y+5) + 'px');
 
Zuletzt bearbeitet von einem Moderator:
Ich habe bei jsbin mal etwas angelegt: Beispiel

- - - Aktualisiert - - -

andreax schrieb:
Du verschiebst dein div bei mousemove immer an die Position des Mauszeigers dann wirds ein mouseout


versezte das div mal um ein paar px.
Code: 
 hint.css('left', (x-5) + 'px');
 hint.css('top',(y+5) + 'px');
Zum Vergrößern anklicken....

Das war ein guter Hinweis. Das funktioniert und nun weiß ich warum beide Events getriggert wurden. Der Mauszeiger schiebt sich (auch mit leichtem versetzen) manchmal in das div, da das bewegen nicht ganz smooth läuft. (Was dann das nächste Problem ist.) Aber durch das versetzen sieht man es deutlich und bestätigt deine Aussage.

Vielen Dank @andreax
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben