Unexpected result when accessing DOM attributes using nested DIVs

phillhw

06-07-2003, 11:36 AM

When using nest DIVs or SPANs to call a javascript function to display the node.firstChild.data, the function is called more than once and is called for every node right back to the start of the first DIV. If I replace the DIVs with nested P tags this does not occur. Anyone have any idea?

<html>
<head>
<title>Unexpected Result</title>
<style type="text/css">

</style>

<SCRIPT LANGUAGE="JavaScript">

</script>
</head>

<body>

<div onclick="checkitem(this)" class="item">Document Root
<div onclick="checkitem(this)" class="item">Chapter 1
<div onclick="checkitem(this)" class="item">Section 1.1
</div>
<div onclick="checkitem(this)" class="item">Section 1.2
</div>
</div>
</div>

</body>
</html>

phillhw

06-07-2003, 11:42 AM

This occurs with both IE6 and mozilla 1.4. If a taged object is placed within the nested divs this does not occur and the javascript function is executed once.

<div class="item">
<span onclick="checkitem(this)">Section 1.1</span>
</div>

liorean

06-07-2003, 12:12 PM

First of all - p can't nest. p only allows inline elements. I believe that is the reason for it not happening there. If you want to only trigger the event on one of the elements, stop the bubbling - that should do it.

phillhw

06-07-2003, 12:58 PM

I was just not sure what the term was called that caused it. I can think of quite a few positive uses for bubbling. I did not see it as a problem. I realize that breaking the bubble prevents or I could use the events preventDefault method. Thankyou for the prompt reply. It is actually documented.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling

The reason why I started with bubbling was to demonstrate how to build a tree style structure without resorting to tables:

http://www.mywebstuff.com/01_dhtml/dht_p02_06.html

Thanks again..

phillhw

06-07-2003, 01:08 PM

It is true that Ps cannot be nested and this was probably a bad example. Although the layout using Ps cannot nest, I can still physically nest Ps in each other within the source code. DOM build its structure from the source code.

liorean

06-07-2003, 03:00 PM

Well, you have a very important difference between HTML4 and XHTML here. Have a look at this code:
Grandparent
<p>Parent
<p>Child
<p>Grandchild
</p>
Child
</p>
Parent
</p>
Grandparent

This is invalid, of course, but here's how an XML or XHTML parser would parse it:
>#text:Grandparent
>p
>p>#text:Parent
>p>p
>p>p>#text:Child
>p>p>p
>p>p>p>#text:Grandchild
>p>p>/p
>p>p>#text:Child
>p>/p
>p>#text:Parent
>/p
>#text:Grandparent

And here is how an SGML/HTML parser would parse it:
>#text:Grandparent
>p
>p>#text:Parent
>/p
>p
>p>#text:Child
>/p
>p
>p>#text:Grandchild
>/p
>#text:Child
>/p
>#text:Parent
>/p
>#text:Grandparent

There is a possibility that a badly written HTML parser would make the parsing that an XML parser does, but that would be a very erratic parser, because it SHOULD know to close the p tag before it opens any block element.