onmouseover wird mehrmals aufgerufen bei td
0 0 
molily
onmouseover wird mehrmals aufgerufen bei td
Hallo Leute,
ich habe ein Problem mit dem onmouseover bei tds.
Ich habe eine Zelle mit folgendem Code:
<td onmouseover="request(this)">
<a href="...">Text</a>
</td>
Wenn ich jetzt in der JS-Funktion request() ein alert("Hallo") einbaue, wird dies mehrmals auf der selben Zelle aufgerufen bzw. ausgegeben - wenn ich zum Beispiel über den Text gehe.
Hat jemand eine Idee, wie ich das Problem lösen kann bzw. wodrin das Problem besteht?
Grüße
Frank
-
Hallo,
ich habe ein Problem mit dem onmouseover bei tds.
Ich habe eine Zelle mit folgendem Code:
<td onmouseover="request(this)">
<a href="...">Text</a>
</td>> > Wenn ich jetzt in der JS-Funktion request() ein alert("Hallo") einbaue, wird dies mehrmals auf der selben Zelle aufgerufen bzw. ausgegeben - wenn ich zum Beispiel über den Text gehe. > > Hat jemand eine Idee, wie ich das Problem lösen kann bzw. wodrin das Problem besteht? Das Problem besteht darin, dass die Maus, wenn sie über dem A-Element ist, auch ein mouseover auslöst, welches dann zum TD-Element aufsteigt (Event bubbling). Dieses löst dann mouseover im TD nochmals aus. Das kann man unterdrücken, indem man das bubbling unterdrückt. Zusätzlich kommt aber die Maus dann vom A-Element wieder ins TD-Element zurück und löst wiederum onmousover im TD-Element aus. Das zu unterdrücken ist schwieriger. Im Beispiel habe ich es mit der Abfrage versucht, woher die Maus bei TD.onmousover kommt. Das funktioniert sogar im IE und FireFox ganz gut. Nur der Opera spinnt sich was von BODY und undefined zusammen, woher die Maus \_innerhalb\_ des TD angeblich kommt. Als Lösung würde ich das Beispiel also nicht ansehen. Ich würde versuchen das onmousover auf das A-Element zu legen und dieses so zu formatieren, dass es das TD-Element vollständig ausfüllt. Beispiel: ~~~html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mouseover soll innere Elemente ignorieren</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> td { width:300px; height:100px; vertical-align:middle; text-align:center; background-color:#ff0; } </style> <script type="text/javascript"> <!-- function request(e) { var myMonitor = document.getElementById("monitor"); e = (e)?e:window.event; //Von welchem Element kommt die Maus beim mousover? if (e.fromElement) { myMonitor.innerHTML = "over von: " + e.fromElement.tagName; if (e.fromElement.tagName == "A") return false; } else if (e.relatedTarget) { myMonitor.innerHTML = "over von: " + e.relatedTarget.tagName; if (e.relatedTarget.tagName == "A") return false; } alert("request ausgeführt. " + this.tagName); } window.onload = function() { var myZelleMitLink = document.getElementById("zelleMitLink"); //mouseover Eventhandler setzten: myZelleMitLink.onmouseover = request; //Für alle Elemente innerhalb der Zelle mouseover-bubbling unterdrücken: myElementeInZelleMitLink = myZelleMitLink.getElementsByTagName("*"); for (var i = 0; i < myElementeInZelleMitLink.length; i++) { myElementeInZelleMitLink[i].onmouseover = function(e) { e = (e)?e:window.event; if (e.stopPropagation) e.stopPropagation(); else if (e.cancelBubble === false) e.cancelBubble = true; }; } }; //--> </script> </head> <body> <table border="1"> <tr> <td id="zelleMitLink"> <a href="#">Text</a> </td> </tr> </table> <div id="monitor"> </div> </body> </html>viele Grüße
Axel
-
Hallo,
//Für alle Elemente innerhalb der Zelle mouseover-bubbling unterdrücken:
myElementeInZelleMitLink = myZelleMitLink.getElementsByTagName("*");Na, das ist aber ein Holzhammer. Ich würde vorschlagen, die Position des fromElement zu prüfen. Liegt es innerhalb des Containers (oder ist es der Contaner selbst), kann der Mouseover ignoriert werden.
http://molily.de/temp/mouseenter-mouseleave.html
Müsste im Firefox, IE, Opera und Safari problemlos funktionieren.Mathias
-
Hallo,
//Für alle Elemente innerhalb der Zelle mouseover-bubbling unterdrücken:
myElementeInZelleMitLink = myZelleMitLink.getElementsByTagName("*");Na, das ist aber ein Holzhammer.
Naja, kommt drauf an, wieviele Elemente sich in der Tabellenzelle befinden. Das sollten bei einer realen Tabelle (keine Layouttabelle) ja nicht so viele sein ;-).
Ich würde vorschlagen, die Position des fromElement zu prüfen. Liegt es innerhalb des Containers (oder ist es der Contaner selbst), kann der Mouseover ignoriert werden.
http://molily.de/temp/mouseenter-mouseleave.html... if (this.contains(fromElement) || fromElement == this) return; ...Ja, das erspart das Canceln des Bubbling, weil Mouse Events mit sich selbst als fromElement ignoriert werden und es löst mein Problem mit dem Opera, weil nicht der TagName als Grund des Ignorierens herhalten muss, sondern die Prüfung, ob das fromElement sich im Mouse Event behandelnden Element befindet. Soweit hatte ich nicht gedacht.
Müsste im Firefox, IE, Opera und Safari problemlos funktionieren.
Ja. Danke für die Anregung.
Letztlich würde ich im vorliegenden Fall trotzdem bei der Empfehlung bleiben:
Mouse-Events auf das A-Element legen und dieses so groß machen, dass es das TD-Element voll ausfüllt.viele Grüße
Axel
-
-