[JS/CSS] nested div's en onclick event - Softwareontwikkeling

maandag 19 maart 2007 15:06

Acties:

Verwijderd

Topicstarter

code:

<html>
<head>
<script>
function foo() {
  //doe foo dingetjes
}

function bar() {
  //doe bar dingetjes
}
</script>
<body>
<div onclick="foo();">
<div onclick="bar();">
</div>
</div>
</body>
</html>

Ik zit met het probleem dat 'bar()' nooit wordt uitgevoerd, ook niet wanneer ik op area van de binnenste div klik, dan nog wordt dot gezien als een klik op de buitenste div en wordt 'foo()' uitgevoerd. Hoe dit probleem op te lossen.
Overigens werk ik alleen met IE6, dus een IE6 specifieke oplossing is genoeg.

Alvast bedankt.

maandag 19 maart 2007 15:14

Acties:

Rekcor

Vreemd,

HTML:

<html>
<head>
<script>
function foo() {
  alert('foo');
}

function bar() {
  alert('Bar');
}
</script>
<body>
<div onclick="foo();">a
<div onclick="bar();">b
</div>
</div>
</body>
</html></html>

werkt prima bij mij (IE7).

maandag 19 maart 2007 15:20

Acties:

Guru Evi

Ik denk dat IE6 niet kan uitmaken welke je primaire div zou moeten zijn op welke locatie. In correcte logica (theoretisch), zouden beide functies moeten uitgevoerd worden. Maar omdat je onclick event op 2 objecten tegelijkertijd plaatst en er maar 1 onclick event per object kan plaatsvinden gaat er maar 1 (onbepaald) object worden geactiveerd.

Waarom doe je eigenlijk 2 div's in elkaar?

Pandora FMS - Open Source Monitoring - pandorafms.org

maandag 19 maart 2007 15:33

Acties:

Verwijderd

Topicstarter

Rekcor schreef op maandag 19 maart 2007 @ 15:14:
Vreemd,

HTML:

<html>
<head>
<script>
function foo() {
  alert('foo');
}

function bar() {
  alert('Bar');
}
</script>
<body>
<div onclick="foo();">a
<div onclick="bar();">b
</div>
</div>
</body>
</html></html>

werkt prima bij mij (IE7).

helaas ben ik gebonden aan IE6

maandag 19 maart 2007 15:34

Acties:

Verwijderd

Topicstarter

Guru Evi schreef op maandag 19 maart 2007 @ 15:20:
Ik denk dat IE6 niet kan uitmaken welke je primaire div zou moeten zijn op welke locatie. In correcte logica (theoretisch), zouden beide functies moeten uitgevoerd worden. Maar omdat je onclick event op 2 objecten tegelijkertijd plaatst en er maar 1 onclick event per object kan plaatsvinden gaat er maar 1 (onbepaald) object worden geactiveerd.

Waarom doe je eigenlijk 2 div's in elkaar?

Door de layout die gehanteerd wordt ben ik gebonden aan het gebruiken van geneste divjes

maandag 19 maart 2007 15:40

Acties:

BtM909

Watch out Guys...

Is laatst ook al een topic over geweest. Zet eens echte content in je divs?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 19 maart 2007 15:44

Acties:

Rekcor

En wat gebeurt er als je dit doet?

HTML:

<html>
<head>
<script>
function foo(oDiv) {
 alert(oDiv.id);
}

function bar() {
  //doe bar dingetjes
}
</script>
<body>
<div id="a" onclick="foo(this);">
<div id="b" onclick="foo(this);">
</div>
</div>
</body>
</html>

maandag 19 maart 2007 15:50

Acties:

Verwijderd

Topicstarter

HTML:

<html>
<head>
<script>
function foo() {
  //doe foo dingetjes
}

function bar() {
  //doe bar dingetjes
}
</script>
<body>
<div onclick="foo();">
bladibla
<div onclick="bar();">
<img src="pic.jpg" style="float:right; cursor: pointer">
</div>
</div>
</body>
</html>

Je moet het alsvolgt zien: de buitenste div is een box waarop geklikt kan worden ('foo()' wordt uitgevoerd) en de binnenste div is een kleinere box in deze box waar ook op geklikt kan worden (en in dit geval moet dat 'bar()' uitegevoerd worden).
Hoop dat het zo wat duidelijker is.

maandag 19 maart 2007 16:05

Acties:

Verwijderd

Topicstarter

HTML:

<html>
<head>
<script>
function foo() {
  //doe foo dingetjes
}

function bar() {
  window.event.cancelBubble = true;
  //doe bar dingetjes
}
</script>
<body>
<div onclick="foo();">
bladibla
<div onclick="bar();">
<img src="pic.jpg" style="float:right; cursor: pointer">
</div>
</div>
</body>
</html>

Dit moet de oplossing zijn.
http://www.quirksmode.org/js/events_order.html

Allen bedankt voor jullie reacties.

[ Voor 3% gewijzigd door Verwijderd op 19-03-2007 16:06 ]

Pagina: 1

Reageer