Verschachtelte Divs
Scraper
- javascript
0 Thomas J.S.0 Scraper0 Thomas J.S.0 Scraper0 Thomas J.S.0 Scraper
Hallo zusammen
Ich habe da ein kleines Problem mit verschienden verschachtelten DIV's.
<div id="border" class="border">
<div id="parent" class="parent">
<div id="childhead" class="childhead"></div>
<div id="childbody" class="childbody"></div>
</div>
</div>
Wenn ich jetzt hier einen Eventlistener oder Eventhandler im untersten Div notiere wird dieser auch ausgeführt wenn sich z.b. bei einem mousover die Maus über den inneren Divs befindet.
Frage: Wie kann ich diesen Effekt unterbinden, d.h. für die einzelnen Divs eigene unabhängige Events notieren oder auch keine?
Vielen Dank für eure Hilfe!
mfg
Scraper
Hallo,
Ich habe da ein kleines Problem mit verschienden verschachtelten DIV's.
Wenn ich jetzt hier einen Eventlistener oder Eventhandler im untersten Div notiere wird dieser auch ausgeführt wenn sich z.b. bei einem mousover die Maus über den inneren Divs befindet.
Frage: Wie kann ich diesen Effekt unterbinden, d.h. für die einzelnen Divs eigene unabhängige Events notieren oder auch keine?
Die Seite könnte dir Helfen http://www.quirksmode.org/js/eventexample.html
Grüße
Thomas
Die Seite könnte dir Helfen http://www.quirksmode.org/js/eventexample.html
Nö, das Beispiel hilft mir leider nicht, da hier mein Problem keinesfalls gelöst ist. Wenn man hier auf das 2. div klickt, werden die events des 1. divs trotzdem ausgeführt was in meinem fall eben nicht der Fall sein sollte.
mfg
scraper
Hallo,
Nö, das Beispiel hilft mir leider nicht, da hier mein Problem keinesfalls gelöst ist. Wenn man hier auf das 2. div klickt, werden die events des 1. divs trotzdem ausgeführt was in meinem fall eben nicht der Fall sein sollte.
Dann müssen wir unseren Kristallkugen befragen was du so in deiner Seite am Code stehen hast.
Oder wie meinst du würden wir es sonst erfahren wie deine Eventlistener definiert sind? ;-)
Grüße
Thomas
Jaja...
Das mit der Kristallkugel wäre eine gute Idee für die Lösung meines Problems ;-)
Nö, mal ernst...
Sach ist, dass ich bis jetzt nicht sehr viel Code dazu habe. Sache ist, dass ich die ganzen eventlistener nur zu Testzwecken geschrieben haben. Aber ich poste mal den quelltext hier dann kannst dus gleich auch mal testen!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.border {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 50px;
background-color: #DEDBD6;
border: 2px solid #848284;
z-index: 10;
padding: 1px;
overflow: hidden;
cursor: n-resize;
}
.parent {
position: absolute;
height: 50px;
width: 300px;
background-color: #DEDBD6;
z-index: 20;
overflow: hidden;
cursor: default;
}
.childhead {
position: absolute;
height: 20px;
width: 300px;
background-color: #848284;
z-index: 30;
overflow: hidden;
}
.childbody {
position: absolute;
top: 21px;
height: 30px;
width: 300px;
background-color: #DEDBD6;
z-index: 31;
overflow: hidden;
}
</style>
<script language="javascript" type="text/javascript">
function Init() {
document.getElementById('border').addEventListener('mouseover', Cursor, true);
document.getElementById('childhead').addEventListener('mousedown', Move, true);
}
function Cursor() {
alert('Hallo Welt');
}
function Move() {
alert('Hello World');
}
</script>
</head>
<body onload="Init()">
<div id="border" class="border">
<div id="parent" class="parent">
<div id="childhead" class="childhead"></div>
<div id="childbody" class="childbody"></div>
</div>
</div>
</body>
</html>
Wenn du dir mal den Code ansiehst wirst du auch die Absicht dahinter merken ... denke ich mal ;-)
Auf jeden Fall sollte es so sein dass wenn man auf den div mit der id childhead geht nicht auch noch der Event des divs mit dem border id ausgeführt wird.
mfg
scraper
Hallo,
Wenn du dir mal den Code ansiehst wirst du auch die Absicht dahinter merken ... denke ich mal ;-)
Nö, ich verstehe nicht wirklich was du damit vorhast .... ??
(allerdings der IE untersützt kein addEventListener)
Auf jeden Fall sollte es so sein dass wenn man auf den div mit der id childhead geht nicht auch noch der Event des divs mit dem border id ausgeführt wird.
Dann solltest du sie nicht verschachteln und für .childhead auch position:absolute; top:100px; left:100px; geben solltest.
Mehr fällt mir leider uch nichts ein.
Grüße
Thomas
Das Ding das ja dann im Browser kommt sollta dann verschiebbar sein, daher sollte ich die divs verschachteln.
Trotzdem Danke für deine Mühe
mfg
scraper