[JS] Onclick gaat verkeerd in geneste lists (IE6)

[Verwijderd]

Ik heb in IE6 - niet in FireFox - een probleem met de volgende html-code in IE6:

HTML:

<ul>
    <li onClick="alert('a');">Node 1</li>
    <ul>
        <li>Node 1.1</li>
        <ul>
            <li>Node 1.1.1</li>
            <li>Node 1.1.2</li>
        </ul>
    </ul>
    <li>Node 2</li>
</ul>

Op het moment dat je op Node 1 klikt komt (uiteraard) de alertbox. Hij komt echter ook als je op de Nodes 1.1 tot en met 1.1.2 klikt, wat niet de bedoeling is (en wat er volgens mij ook niet staat). Klik je op Node 2 dan gebeurt er - zoals het hoort - weer niets.

Wat gaat hier fout? Zoals gezegd, in IE6 gaat het fout, FireFox begrijpt het wel.

(ik kan vergelijkbare problemen vinden, maar niet precies dit probleem, vandaard dus deze post.)

[André]

Volgens mij gaat het hier in IE toch echt goed, een onclick op een element wordt doorgegeven aan zijn parent (event bubbling). Als je dat wil cancellen kun je checken op welk element er geklikt is en dan met event.cancelBubble het event cancellen.

[Verwijderd]

het is beetje rare volgorde van html
je sluit eerst je li af en daarna kom je dus met een ul in een ul, wat dus niet valideert enzo.
normaal staat die nieuwe ul in de li.
zo dus:

code:

<ul>
    <li onClick="alert('a');">Node 1
        <ul>
            <li>Node 1.1
                <ul>
                    <li>Node 1.1.1</li>
                    <li>Node 1.1.2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Node 2</li>
</ul>

edit:
het lijkt mij wel een oplossing om een span of een achor te zetten om de 'Node 1' text, en daar de onclick op te zetten.
is simpeler dan de event bubbling manier van André.

[ Voor 82% gewijzigd door Verwijderd op 31-07-2005 23:39 ]