javascript - $(*).click 事件单击它及其所有父级。

Question

这是我的代码:

<p>
    <div>
        <div><span>Hello</span></div>
        <span>Hello Again</span>
    </div>
    <div>
        <span>And Hello Again</span>
    </div>
</p>
<b>Click Hellos to toggle their parents.</b>
<script>
    function showParents() {
        $("div").css("border-color", "white");
        var len = $("span.selected")
        .parents("div")
        .css("border", "2px red solid")
        .length;
        $("b").text("Unique div parents: " + len);
    }
    $("*").click(function () {
        $("b").text($(this).parents().length);
    });
</script>

问题是当我点击跨度时，它显示 0 而不是 3!

我认为问题是*

现在的问题是，当我不知道元素的类型时，如何获取父元素的计数？

Answer 1

问题是事件传播(冒泡)。单击事件从被单击的元素传播到文档的根，触发与这些祖先元素关联的每个单击处理程序，因此当 html 元素的单击处理程序被触发时，不再有父元素，因此您结果为 0。

演示:Fiddle - 看看控制台

相反，您可以将点击处理程序仅绑定(bind)到文档对象，然后使用事件的目标属性找到触发点击的元素并找到其父元素

$(document).click(function (e) {
    $("b").text($(e.target).parents().length);
});

演示:Fiddle