5

我正在填写此列表：

<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 将被调用两次。如果我单击第三级（即：FolderList2bi），它会被调用 3 次 - 依此类推。有谁知道这里发生了什么？！提前致谢！

4

5 回答 5

10

单击事件正在冒泡Dom
如果要防止冒泡，请myFunc返回 false

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

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

于 2012-07-04T19:58:56.253 回答
1

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

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

并放在return false函数的末尾：

function myFunc(id) {
    //do something

    return false;
};
于 2012-07-04T19:56:42.047 回答
0

您应该使用它.bind()来避免冒泡 DOM。

$("#FolderList li").bind("click", function() {
//do stuff
});
于 2012-07-04T19:59:28.010 回答
0

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

于 2012-07-04T20:00:18.853 回答
0

基本上，您遇到的称为事件冒泡。

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

查看MDN 事件传播的示例

于 2012-07-04T20:02:41.207 回答