jQuery .on 应用于所有中间节点

jQuery .on to apply to all intermediate nodes

本文关键字：中间 节点 on 应用于 jQuery      更新时间：2023-09-26

给定这样的文档：

<body><div class="a"><div class="b"><div class="c"></div></div></div></body>

（在示例中，一切都是div - 但它们可以是任何东西）

我想为被单击的div 及其所有父级的

即，如果您单击.c我希望该事件触发.c然后.b然后.a如果单击.b则事件应触发.b然后.a

注意：在这种情况下，我正在使用$('body').on('click', function(event){...})出于与问题无关的原因，在我的实例中，使用 $('div').click(function(event){...}) 不是一个实用的选择。

我尝试从事件处理程序中遍历 dom 树，该处理器有效，但事件对象包含错误的偏移量。

所以我的问题是 - 是否有一种内置的方法可以使用上述模式调用事件处理程序。

或者失败了 - 是否有一种内置的方式来操作给定"from"和"to"元素的事件对象的偏移量。即类似AdjustOffsets(event, $target, $target.parent())

或者失败了 - 我需要什么逻辑才能手动执行此操作。

在最后一种情况下，我有此代码，但它不起作用。

if ($target.css('position') != 'static' && $target.css('position') != '')
    {
        event.clientX += $target.css('left');
        event.clientY += $target.css('top');
    }
    event.clientX += $target.css('borderLeftWidth');
    event.clientY += $target.css('borderTopWidth');
    event.clientX += $target.css('marginLeft');
    event.clientY += $target.css('marginTop');
    $target = $target.parent();
    event.clientX += $target.css('paddingLeft');
    event.clientY += $target.css('paddingTop');

此操作失败，因为 CSS 属性包含单位。单位很容易剥离，但我相信有些浏览器在这里返回原始单位（例如可能是em或pt），而clientX属性必须是像素 - 所以转换是必要的。

这也是我最好的猜测，可能错过了一千个晦涩难懂的 css3 案例 - 因此我对某种内置方法的雄心勃勃的渴望。

我不太确定你的问题是什么。您是否希望单击事件触发，例如div.a当您单击div.c？㞖。这应该已经发生了，因为默认情况下点击事件会通过 DOM 冒泡。

看看这个小提琴，你会发现如果你点击div.c，div.b和div.a的点击事件也会被触发。

编辑：新小提琴，只需 1 on()

您可以在事件处理程序中尝试递归触发器，如下所示：

$(document).on('click', '.someClass', function(e){
    // .. do stuff
    $(this).parent('.someClass').trigger('click');
});
相关文章：