為什么這個函數多次觸發？

Question

我填寫這個清單：

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

使用jquery生成以下HTML的文件夾列表：

<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

返回false; };

出於某種原因，如果我點擊1級li項，函數myFunc（）將按預期執行。 如果我點擊“2級”項目（即：FolderList2a），則會調用myFunc兩次。 如果我點擊第3級（即：FolderList2bi），它會被調用3次 - 依此類推。 誰知道這里發生了什么？！ 提前致謝！

Answer 1

點擊事件正在向Dom 冒泡
如果你想防止冒泡，讓myFunc返回false

要停止冒泡，您需要根據瀏覽器訪問事件對象， event.stopPropagation或event.cancelBubble 。

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

Answer 2

你應該傳遞一個字符串作為參數，所以引用它：

                                             .--.-----------------
                                             v  v
<li id="FolderList2a" onclick="return myFunc('2a')">Sub Item 1</li>

並且在函數的末尾放置return false ：

function myFunc(id) {
    //do something

    return false;
};

Answer 3

您應該使用.bind()來避免冒泡DOM。

$("#FolderList li").bind("click", function() {
//do stuff
});

Answer 4

事件會多次觸發，因為它會起泡。 您可以閱讀有關事件冒泡的更多信息，例如： http ： //www.quirksmode.org/js/events_order.html

Answer 5

基本上你遇到的是名為Event Bubbling。

單擊嵌套的元素集時，單擊首先發送到層次結構中最深的元素，然后在層次結構中上升。

查看有關MDN事件傳播的示例