Sven Mintel
Mitglied
Das Problem ist, dass sich auch Events vererben 
Klickst du irgendwohin, feuert der onclick-Event in dem betreffenden Element und in all dessen Elternelemente.
Dieses Verhalten kann man abstellen:
event.cancelBubble=true (IE)
event.stopPropagation() (andere)
Hier mal ein simples Beispiel:
Es werden die Events fürs Dokument und nochmals für die "Liste" überwacht. Feuern die Events in der Liste, wird deren Vererbung gecancelt...man kann also sicher sein, dass die Eventüberwachung fürs document nicht zum Tragen kommt, wenn in die Liste geklickt wurde.
Klickst du irgendwohin, feuert der onclick-Event in dem betreffenden Element und in all dessen Elternelemente.
Dieses Verhalten kann man abstellen:
event.cancelBubble=true (IE)
event.stopPropagation() (andere)
Hier mal ein simples Beispiel:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<meta name="author" content="doktormolle" />
<meta name="date" content="2008-12-15" />
<title>Test</title>
<script type="text/javascript">
<!--
window.onload=function()
{
document.onclick=document.onmouseover=
function(event)
{
document.getElementById('optionen').style.display='none';
}
document.getElementById('liste').onclick=
document.getElementById('liste').onmouseover=
function(event)
{
e=(window.event)?window.event:event;
(window.event)?e.cancelBubble=true:e.stopPropagation();
o=(window.event)?e.srcElement:e.target;
if(e.type=='mouseover' && o.id=='liste')//anzeigen
{
document.getElementById('optionen').style.display='block';
}
else if(e.type=='click' && o.parentNode.id=='optionen')//es wurde eine Option gewählt
{
alert('Du hast "'+o.firstChild.data+'" gewählt.\nMach was draus.');
}
}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<div id="liste" style="width:200px;border:1px solid #000;cursor:pointer" onclick="return false">
-Auswahlliste
<div id="optionen" style="display:none;background:#e1e1e1;">
<div>option1</div>
<div>option2</div>
<div>option3</div>
<div>option4</div>
</div>
</div>
</body>
</html>Es werden die Events fürs Dokument und nochmals für die "Liste" überwacht. Feuern die Events in der Liste, wird deren Vererbung gecancelt...man kann also sicher sein, dass die Eventüberwachung fürs document nicht zum Tragen kommt, wenn in die Liste geklickt wurde.
