nicht angemeldet
Hallo,
habe ein nerviges Problem, zur Veranschaulichung:
<div id="aussen" onmousedown="alert(this.id)">
<div id="innen" onmousedown="alert(this.id)">
</div>
</div>
Klickt man nun auf den den inneren DIV, so kommt auch wieder die alert-Meldung mit dem Text "aussen".
Allerdings hätte ich gerne ausschließlich die Meldung "innen", wenn auf die innere Box geklickt wird.
Bei Klick auf den äußeren DIV würde ich gerne "aussen" lesen.(Wie) Ist das machbar?
Dazu musst Du das Event bubbling unterbrechen. Ein Event steigt standardmäßig vom Element, welches ihn auslöst, durch den DOM-Baum bis zum Wurzelelement auf. In Deinem Fall löst der Mausklick auf dem DIV#innen auch einen Mausklick auf dem DIV#aussen und dann einen Mausklick auf dem Elternelement der DIVs aus usw. bis zum HTML-Element. Diese Aufsteigen des Events kann man unterbrechen. Natürlich nicht browserübergreifend einheitlich. Das wäre ja zu einfach ;-). Der MSIE kennt dafür event.cancelBubble. Mozilla kennt das neuerdings auch, siehe Gecko DOM Reference: event.cancelBubble. Es ist aber trotzdem empfehlenswerter, für standardkonforme Browser die DOM-Standardmethode zur Steuereung des Event bubbling einzusetzen. Das wäre Event.stopPropagation.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stoppen des Event-Bubbling</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#aussen { height:200px; width:500px; background-color:#f00; position:relative; }
#innen { height:100px; width:400px; background-color:#0ff; position:absolute; top:50px; left:50px; }
</style>
<script type="text/javascript">
<!--
function reagiereAufEventUndLeiteIhnNichtWeiter(e) {
e = (e)?e:window.event;
if (e.stopPropagation) e.stopPropagation();
else if (e.cancelBubble === false) e.cancelBubble = true;
alert(this.id);
}
window.onload = function() {
document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
document.getElementById("innen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
}
//-->
</script>
</head>
<body>
<div id="aussen">
<div id="innen">
</div>
</div>
</body>
</html>
Mit dem Codeblock
window.onload = function() {
document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
document.getElementById("innen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
}
wird übrigens eine unaufdringlichere Methode zum Setzen der Eventhandler onmousedown eingesetzt. Hier benötigt man keine Attribute mehr im HTML-Code. Außerdem wird es hier einfacher, die Eventhandler so zu notieren, dass das Event-Objekt auch bei Standardkonformen Browsern mit übergeben wird.
viele Grüße
Axel