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

Question

我正在使用嵌套的树视图菜单，有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()方法。 反过来，单击任何嵌套列表项会加载顶级列表项的内容。

因此，当事件触发时，我想检查导致事件处理程序执行的是否是点击的发起者。 Event.target（以及告诉我当前列表项的任何内容）都不起作用，因为它们告诉我当前触发的项目，而不是发起者。

最后，event.stopPropogation（）不起作用，因为它将停止所有嵌套元素的传播，因为它们包含更高级别的元素。

关于如何确定点击事件的发起人的任何想法？

更新：这是JSFiddle： http ： //jsfiddle.net/kUR3r/

Answer 1

只是绑定锚，而不是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/

Answer 2

返回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;
    });

Answer 3

我认为这与你的选择器有关吗？ $（“a”，this）将触发所有标记。 我可能错了。