javascript 如何从事件目标最近(名称)获取元素

wyyhbhjk 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(112)

我不确定如何使用事件目标closest([name="..."])，因为我理解closest()应该在我更改输入字段中的值以进行计算后获取元素，但我获取的元素是null

function calculate(e) {
    if (e.target.name == 'qty') {
      var elemPrice = e.target.closest('[name="price"]') //***
      var elemAmount = e.target.closest('[name="amount"]') //***
      console.log(elemPrice)
      console.log(elemAmount)
      elemAmount.value = elemPrice.value * e.target.value
    }
}
document.addEventListener('DOMContentLoaded',function(){
    document.getElementsByName('qty').forEach(t => { t.addEventListener('change',calculate) })
})

个字符
我试过了

...
      var elemPrice = e.target.parentElement.previousElementSibling.lastElementChild  //***
      var elemAmount = e.target.parentElement.nextElementSibling.lastElementChild  //***
   ...

型
但我想做的是closest有办法做到吗？
无论如何先谢谢你

JavaScript

来源：https://stackoverflow.com/questions/63046477/how-to-get-an-element-from-event-target-closestname

2条答案

按热度按时间

0yg35tkg1#

阅读文档总是一个好主意。如果我们看一下https://developer.mozilla.org/en-US/docs/Web/API/Element/closest，它说：

**closest（）**方法遍历Element及其父节点（指向文档根），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回null。

所以它不会做你所假设的事情：它只检查从元素到文档根的路径。你需要找到最接近的<tr>，然后在 that 元素中找到name=price元素：

e.target.closest(`tr`).querySelector(`[name=price]`)

字符串

赞(0）回复(0）举报 2023-08-02

1tu0hz3e2#

不要忘记，使用TypeScript时，必须明确target元素的类型。

highlight($event: Event) {
  let tar = $event?.target as HTMLElement; // HTMLInputElement etc

  console.log(tar);
  // now TS allows access to expected HTMLElement methods like .closest
  console.log(tar.closest('div'));
}

字符串
应该注意的是，根据Angular文档，传递整个event对象是一种“可疑的做法”。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 如何从事件目标最近(名称)获取元素

2条答案

相关问题

热门标签

最新问答