如果单击事件冒泡到绑定到同一单击处理程序的元素，我如何隔离单击的初始目标?

How can I isolate the initial target of a click, if the click event bubbles up to elements bound to the same click handler?

本文关键字：单击 何隔离 隔离 目标 元素 绑定 事件 如果 程序 处理      更新时间：2023-09-26

我正在使用一个嵌套的树视图菜单，有3层嵌套。每个列表项(每一层)都负责在点击时将一些新内容加载到页面上:

$('li', '#navigation').click(function(event) { // this targets all three layers of nested menu items
    event.preventDefault(); // prevents click from making new server request
    var url = $("a", this).attr("href");
    loader.load(url);
});

问题是，当您单击一个嵌套的列表项(向下一层或两层)时，"单击"会通过它上面的每个列表项弹出，导致所有三个列表项都运行指定的事件处理程序loader.load()方法。然后，单击任何嵌套列表项将加载顶级列表项的内容。

因此，当事件触发时，我想检查导致事件处理程序执行的原因是否是单击的发起者。事件。Target(以及任何告诉我当前列表项的东西)将不起作用，因为它们告诉我当前正在发射的项目，而不是发起者。

最后，event. stoppropagation()不能工作，因为它会停止所有嵌套元素的传播，因为它们包含在更高级的元素中。

关于如何确定点击事件的发起者，有什么想法吗?

更新:这里是JSFiddle: http://jsfiddle.net/kUR3r/

只绑定锚，不绑定li。你一开始为什么要绑定li ?

$('#navigation').on('click', 'a', function(event) {
  event.preventDefault();
  var url = $(this).attr('href');
  // whatever else your code does
});
http://jsfiddle.net/kUR3r/3/

返回false;似乎成功了:http://jsfiddle.net/John_C/kUR3r/1/

    $('li', 'ul').click(function (event) {
        event.preventDefault();
        var url = $("a", this).attr("href");
        // loader.load(url);

        $('.target').text(url);
        return false;
    });

我认为这与你的选择器有关?$("a"， this)将触发所有一个标记。我可能错了。

相关文章：