javascript - 为什么这个函数会触发多次？

Question

我正在填写这个列表:

<ul id="FolderList"></ul>

使用生成以下 HTML 的 jquery 的文件夹列表:

<ul id="FolderList">
    <li id="FolderList0" onclick="return myFunc(0)">Item 1</li>
    <li id="FolderList1" onclick="return myFunc(1)">Item 2</li>
    <li id="FolderList2" onclick="return myFunc(2)">Item 3
        <ul>
            <li id="FolderList2a" onclick="return myFunc(2a)">Sub Item 1</li>
            <li id="FolderList2b" onclick="return myFunc(2b)">Sub Item 2
                <ul>
                    <li id="FolderList2bi" onclick="return myFunc(2bi)">Subsub Item 1</li>
                </ul>
            </li>
        </ul>          
    </li>
</ul>

...

function myFunc(id) {
//do something

返回错误； };

出于某种原因，如果我单击 1 级 li 项目，函数 myFunc() 将按预期执行。如果我单击“2 级”项目(即:FolderList2a)，myFunc 将被调用两次。如果我单击第 3 级(即:FolderList2bi)，它会被调用 3 次 - 依此类推。有人知道这里发生了什么吗？!提前致谢!

Answer 1

点击事件是bubbling上 Dom
如果你想防止冒泡让myFunc返回false

要停止冒泡，您需要访问事件对象、event.stopPropagation 或 event.cancelBubble，具体取决于浏览器。

http://jsfiddle.net/Jetyc/3/