为什么 composedPath 在属性不存在时抛出异常，而在存在时起作用？

Question

我在 document 上有一个 click 事件的事件侦听器，我正在使用 composedPath 来确定路径中的任何内容是否包含某个属性。

如果路径 中的某些内容 包含我监听的属性，那么一切正常，一切正常。

但是，如果路径 中的某些内容不 包含我侦听的属性，则会引发异常：

"Uncaught TypeError: el.hasAttribute is not a function"

这里有一个 fiddle 显示：

document.addEventListener('click', (event) => {
  const includesAttribute = event.composedPath().some((el) => el.hasAttribute('my-attribute'));
  console.log(`has attribute: ${includesAttribute}`);
});

<button my-attribute>click me, I log true and work fine</button>

<br/>

<button other-attribute>click me, I throw an exception because I don't have the attribute</button>

为什么只在属性不存在的时候才抛出异常？ hasAttribute 方法不应该一直可用吗？

Answer 1

因为document没有方法getAttribute。您对 some 的调用一直到 document ，但它没有找到任何东西；在此处查看 nodeName 的日志记录：

document.addEventListener('click', (event) => {
  const includesAttribute = event.composedPath().some((el) => {
    console.log(el.nodeName);
    return el.hasAttribute('my-attribute');
  });
  console.log(`has attribute: ${includesAttribute}`);
});

<button my-attribute>click me, I log true and work fine</button>

<br/>

<button other-attribute>click me, I throw an exception but now you can see why</button>

加一个守卫就可以了：

document.addEventListener('click', (event) => {
    const includesAttribute = event.composedPath().some((el) => el.hasAttribute && el.hasAttribute('my-attribute'));
    console.log(`has attribute: ${includesAttribute}`);
});

document.addEventListener('click', (event) => {
  const includesAttribute = event.composedPath().some((el) => el.hasAttribute && el.hasAttribute('my-attribute'));
  console.log(`has attribute: ${includesAttribute}`);
});

<button my-attribute>click me, I log true and work fine</button>

<br/>

<button other-attribute>click me, I do not throw an exception anymore</button>

为什么 composedPath 在属性不存在时抛出异常，而在存在时起作用？

Why does composedPath throw an exception when an attribute does not exist, but works when it does exist?

javascript

ecmascript-6