nicht angemeldet
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