如果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）將觸發所有標記。 我可能錯了。