为什么此函数会多次触发

Why is this function firing multiple times?

本文关键字：函数 为什么      更新时间：2023-09-26

我正在填写此列表：

<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

返回假; };

出于某种原因，如果我单击级别 1 li 项，函数 myFunc（） 将按预期执行。如果我点击"级别 2"项（即：FolderList2a），myFunc 将被调用两次。 如果我单击第 3 级（即：FolderList2bi），它会被调用 3 次 - 依此类推。有人知道这是怎么回事吗？！提前感谢！

点击事件正在冒泡 Dom
如果你想防止冒泡，让myFunc返回假

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

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

你应该传递一个字符串作为参数，所以引用它：

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

并将return false放在函数的末尾：

function myFunc(id) {
    //do something
    return false;
};

您应该改用.bind()以避免冒泡 DOM。

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

事件会触发多次，因为它会冒泡。您可以在此处阅读有关冒泡事件的更多信息：http://www.quirksmode.org/js/events_order.html

基本上你遇到的叫做事件冒泡。

当您单击一组嵌套的元素

时，单击首先发送到层次结构中最深的元素，然后在层次结构中向上移动。

查看有关 MDN 事件传播的示例

相关文章：