Question

我目前使用纯JavaScript在页面上动态生成按钮。

实施例

.c-config__wrapper

我定位父类（event.target）并使用{{1}}定位按钮。如果我点击按钮内部的跨度，它就会成为目标而不是按钮。

使用普通的Javascript，如何确保父按钮仍然是目标而不是跨度？或者如何将跨度作为目标包含在按钮中？

Answer 1

基于MDN event文档，event对象有一个名为composedPath的方法，用于存储：

将调用侦听器的对象数组。 ：此如果创建了阴影根，则不包括阴影树中的节点其ShadowRoot.mode已关闭。

虽然这似乎适用于Chrome，但文档中未指明其他浏览器如何支持此方法。

进一步检查event对象还显示event.path属性也包含相同的路径数组，至少在Chrome 中，但是，我找不到任何文档完全event.path。

话虽如此，我确实看到样品表明它可能更安全 var eventPath = event.path || (event.composedPath && event.composedPath());而非仅使用var eventPath = event.composedPath();

假设您的浏览器支持它，您可以遍历点击元素的路径并检查它是否是按钮的子项或按钮本身。

以下代码演示了这一点并存储了按钮元素引用以供进一步使用。

document.getElementById('wrapper').addEventListener('click', function() {
  // actual element clicked
  console.log(event.target);

  var buttonClicked = false;
  var button;

  var eventPath = event.composedPath();
  for (let i = 0; i < eventPath.length; i++) {
    if (eventPath[i].tagName && eventPath[i].tagName.toLowerCase() === 'button') {
      buttonClicked = true;
      button = eventPath[i];
      break;
    }
  }

  if (buttonClicked) {
    console.log(button);
    console.log('button was clicked');
  }
})

<div id="wrapper">
  <button class="c-config__option c-config__option--button c-config__option--pack" data-index="0">
    Item 1
    <span>Subtext</span>
</button>
  <button class="c-config__option c-config__option--button c-config__option--pack" data-index="1">
    Item 2
    <span>Subtext</span>
</button>
</div>

作为替代方案，您可以使用此SO帖子中的代码复制jQuery.closest：DOM / pure JavaScript solution to jQuery.closest() implementation?

如何在Javascript中定位动态生成的元素时包含子节点？

1 个答案: