-2

所以我有以下div

    <div id="az" class="d_1" value="data1"></div>
    <div id="az" class="d_2" value="data2"></div>
    <div id="by" class="d_3" value="data3"></div>
    <div id="az" class="d_4" value="data4"></div>

如何仅检查是否az单击了 div 而不添加onClick="reply_click(this)"到每个 div？

4

2 回答 2

3

在交换 ID 和类并使用数据属性之后，您需要委派，因为 ID 需要是唯一的，而 DIV 没有价值

window.addEventListener("load",function(){ // on page load
  document.getElementById("container").addEventListener("click",function(e) { // clicking anything in container
    const tgt = e.target; // the event target (what was clicked)
    if (tgt.classList.contains("az")) { // ignore click on "by"
      console.log("az clicked", tgt.dataset.value)
    }
  })
})
<div id="container">
  <div class="az" id="d_1" data-value="data1">D1</div>
  <div class="az" id="d_2" data-value="data2">D2</div>
  <div class="by" id="d_3" data-value="data3">D3</div>
  <div class="az" id="d_4" data-value="data4">D4</div>
</div>

于 2020-05-04T18:13:32.283 回答
1

id属性必须始终是唯一的：
https ://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

您的 class 和 id 属性的结构与应有的相反。类可以是非唯一的以引用一组元素。

下面是一个示例，说明如何使用addEventListener类 css 选择器来实现您所要求的。

function reply_click(){
  console.log(this.getAttribute('value'));
}

document.getElementsByClassName('az').forEach( el => el.addEventListener('click',reply_click) );
    <div class="az" id="d_1" value="data1">1</div>
    <div class="az" id="d_2" value="data2">2</div>
    <div class="by" id="d_3" value="data3">3</div>
    <div class="az" id="d_4" value="data4">4</div>

于 2020-05-04T18:09:43.193 回答