Question

我想问一下如何正确选择element。当我单击图标时，它给了我i标签元素，但嵌套在anchor标签内。哪种方法正确：

// First Approach
if(e.target.parentElement.dataset.role === 'edit') {
 // Do something
}

// Second Approach
if(e.target.dataset.role === 'edit') {
 // Do something
}

<li>
 <a href="#" class="secondary-content" data-role="edit"> <!-- Parent element -->
  <i class="fa fa-pencil"></i> <!-- nested edit icon -->
 </a>
</li>

Answer 1

事件对象的target属性将是被单击的元素。

使用currentTarget获取事件处理程序绑定到的元素。

document.querySelector("button").addEventListener("click", handler);

function handler(event) {
  console.log(event.currentTarget.dataset.role);
}

span {
  background: yellow
}

<ul>
  <li>
    <button data-role="edit">
      Click Me
      <span>Click Me</span>
     </button>
  </li>
</ul>

Answer 2

您只需在i元素中添加唯一的ID， <i id=“some-id ” class=“fa fa-pencil”> 并可以执行以下操作：

document.querySelector(‘#some-id’)

或

document.getElementById(‘some-id’)

或

document.querySelector(‘a i.fa-pencil’)或类似的东西。

带有嵌套元素的JavaScript click事件

2 个答案: