获取绑定委托事件的根元素 - jQuery

Question

使用以下代码：

    // Bind the click event to the thumbnails.
    $("ul.hpList").on("click", "a.hpThumb", function (event) {

        event.preventDefault();

        var $this = $(this),

        // Surely there has to be a smarter way to do this.
            $hpList = $this.parents("ul.hpList");

        changeItem($this, $hpList);

    });

我如何更好地识别事件绑定的根祖先元素。在DOM中搜索这一点让我感到糟糕。

- James South

Answer 1

自从 jQuery 1.7 版本以后，事件对象中包含了delegateTarget属性作为第一个参数传递给你，根据文档，它会提供给你以下信息：

当前调用的 jQuery 事件处理程序附加的元素。

所以，请尝试以下代码；

$("ul.hpList").on("click", "a.hpThumb", function (event) {
    event.preventDefault();

    var $this = $(this),
    var $hpList = $(event.delegateTarget);

    changeItem($this, $hpList);
});

- Matt

---

@Matt 谢谢啊，我在看了你的原始答案后仔细查看了控制台，结果发现它就在那里。 - James South

可能值得一提的是，delegateTarget 需要 jQuery 1.7 或更高版本。 - Blazemonger

@mblase75：我会更新我的回答，但如果你使用“on”，那肯定是在使用1.7 ：）。 - Matt

@Matt，你是这样的。:) 但是我指的是我们不确定原帖作者是否是这样的。 - Blazemonger

在旧版本的jQuery中（例如1.5.x），是否有event.delegateTarget的替代方法？ - Maputo

Answer 2

我不清楚你实际上想要找什么，但是：

在处理程序中使用event.target来确定触发事件的实际DOM元素。

使用$(this)来确定处理程序所附加到的DOM元素，这可能是相同的元素，也可能是事件目标的父元素。

使用.closest()查找元素最近的祖先元素，该元素符合给定的选择器。

- Blazemonger

---

返回翻译后的文本：这将为您提供与问题相反的内容。它将给出 a.hpThumb 或 a.hpThumb 的后代元素。 target 是实际引发事件的元素，而不是在冒泡生命周期中处理它的位置。 - J. Holmes

Answer 3

试试这个：

$("ul.hpList").on("click", "a.hpThumb", function (event) {
    event.preventDefault();
    var $this = $(this),
    // Surely there has to be a smarter way to do this.
    $hpList = $("ul.hpList").has($this);
    changeItem($this, $hpList);
 });

- thecodeparadox

---

@James South请解释一下，为什么我会得到-1。因为Matt和我的代码结果是相同的。请使用console.log($hpList);输出。 - thecodeparadox

@Matt，请问你能解释一下我的代码哪里出了问题吗？ - thecodeparadox

我认为这不是OP想要的；这只是遍历DOM的不同方法。我的印象是OP想要一些不需要遍历DOM来查找元素的东西。 - Matt

@theCodeParadox：我没有给你打分。但是正如Matt所说，我不想遍历DOM，因为那非常昂贵。Matt能够给我提供所需对象的内存表示，从而节省了这段旅程。 - James South