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

点击事件为{¥3}} ~~如果你想阻止冒泡，让myFunc返回false~~

要停止冒泡，您需要根据浏览器访问事件对象event.stopPropagation或event.cancelBubble。

bubbling

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 Event propagation

上的示例

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

5 个答案: