Question

我无法从点击事件中选择最接近的class AccountSerializer < ActiveModel::Serializer attributes :id, :name has_many :users has_many :account_members has_many :invites has_many :projects has_many :clients end元素。

目前，为了使其有效，我从<tr>中选择了列表中的确切数量的元素。

我希望它更灵活，而不需要依赖当前的路径位置编号。

HTML：

event.path

JavaScript的：

<tr>
  <td class="col-site">Stringname</td>
</tr>

使用event.closest('tr')无效，我收到此错误：

未捕获的TypeError：event.closest不是函数

有谁知道为什么？

Answer 1

您似乎正在调用event.closest，这似乎并不合适。您的意思是element.closest，还是event.target.closest？

＆＃13;

function handleClick(event) {
  const tr = event.target.closest('tr');
  tr.style.backgroundColor = 'red';
}


document.querySelectorAll('td').forEach(td => 
  td.addEventListener('click', handleClick));

＆＃13;

td{border:1px solid blue}

＆＃13;

<table>
  <tr>
    <td>Click</td>
    <td>me</td>
  </tr>
</table>

＆＃13;

Answer 2

closest对象上没有Event方法。您需要查找event.target.closest或者只是缓存对您绑定事件监听器的元素的引用，然后对该元素使用closest方法。

const tds = document.querySelectorAll('td');

for(const td of tds) {
  td.addEventListener('click', event => {
    console.log(event.target.closest('tr').id);
    console.log(td.closest('tr').id); // this does the same thing
  }, false);
}

<table>
  <tr id="TR1">
    <td>Some text</td>
  </tr>
  <tr id="TR2">
    <td>Some text</td>
  </tr>
  <tr id="TR3">
    <td>Some text</td>
  </tr>
</table>

在Javascript中获取距离当前事件最近的祖先

2 个答案: