Help! Undesired events firing within a nest unordered list - Table of Contents App
Help! The following little bit of html will display two unordered list, the second of which is nested within the first. As such, if the user clicks on the second list, both the ‘clicked on item number 2’ and the ‘clicked on item number 1’ messages will appear. Is there an easy way to “suppress” the ‘clicked on item number 1’ message if the user clicks on item 2 and only have the ‘clicked on item number 2’ message appear. I know that it can be done via some rather nasty code by changing the value of a variable (in this case a hidden variable) based on which list item was actually clicked and then using a function (fired up by the onclick event) to determine which was actually clicked based on the value of the hidden variable. I would hope that there would be a much easier way such as a property/attribute for the <li> tag that would enable it to be disassociated from its parent object. This particular example specifically relates to a table of contents type application where you might have a whole series of nested unordered list for the top-level sections, sub-sections, and sub-sub-sections in a document. If you click on a top level section and drop down sub-sections in that section (typically by changing the display style for the list from ‘none’ to ‘block’ or ‘inline’) and then click on one of the sub-sections to see the sub-sub-sections, you have in essence clicked on the top level section and caused any events associated with the top level section to fire. Anyway, any help would be greatly appreciated. Sorry for the very long winded discussion.
<html>
<ul>
<li> test1
<li> test1
<li id=list1 onclick="alert('clicked on item number 1')">Item Number 1, click here
<ul>
<li id=list2 onclick="alert('clicked on item number 2')">Item Number 2, click here
<li> test2
<li> test2
</ul
</ul>
</html>
