No debería funcionar en ninguno. El problema es que están anidados, y el click "sube" por el árbol. Los eventos hacen eso.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
</head>
<body onclick="alert('BODY')">
<dl onclick="alert('Principio de lista')">
<dd onclick="alert('A')">A
<dl>
<dd onclick="alert('B')">B
<dl>
<dd onclick="alert('C')">C
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</body>
</html>
Hagan un click en cualquiera de las letras y van a ver cómo el evento sube "clickeando" hasta llegar al
<body>. Por eso las funciones se disparan varias veces.
¿Esto no sirve? Por supuesto, hay que trabajarlo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<dl><dd onclick="alert('1')">Nivel "1."
</dd>
<dd>
<dl><dd onclick="alert('2')">Nivel "2."
</dd>
<dd>
<dl><dd onclick="alert('3')">Nivel "3."
</dd>
<dd>
<dl><dd onclick="alert('4a')">Nivel "4a."
</dd>
<dd onclick="alert('4b')">Nivel "4b."
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</body>
</html>