我怎样才能对所有元素进行onclick？ [复制]答案

【问题标题】：how can i make onclick to all the elments? [duplicate]我怎样才能对所有元素进行onclick？ [复制]
【发布时间】：2019-08-04 16:30:49
【问题描述】：

我尝试对所有 decomnt 进行 onclick 事件，以返回我点击的元素 id。

谢谢

我向您尝试了父 ID document.getElementById("parent").onclick = function(){btnIsClicked(this.id)};

这项工作，但给我父 id 而不是点击的那个..

document.getElementById(*).onclick = function(){btnIsClicked(this.id)};

function btnIsClicked(id){
  console.log(id);
}

请我需要像 * 这样的东西来为所有人制作它，但同时给我点击元素的 id（不仅仅是父元素）

【问题讨论】：

标签： javascript onclick

【解决方案1】：

您可以将事件监听器添加到document 并以event.target 访问被点击的元素

document.addEventListener('click', (event) => {
  console.log(event.target.id);
})

.box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
  display: inline-block;
}

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>

【讨论】：

【解决方案2】：

您可以将事件侦听器附加到文档正文。

document.getElementsByTagName('body')[0].onclick = function(e) {console.log(e.target.id)};

【讨论】：

【解决方案3】：

您可以使用querySelectorAll 和addEventListener 来实现此目的。

const elements = document.querySelectorAll('*');
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  element.addEventListener('click', e => {
    e.stopPropagation();
    btnIsClicked(e.target.id);
  });
}

function btnIsClicked(id) {
  console.log(id);
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

#element-one {
  background: blue;
}

#element-two {
  background: red;
}

<div id="element-one"></div>
<div id="element-two"></div>

【讨论】：

【解决方案4】：

一种可能的方法，使用 querySelectorAll 和 stopPropagation() 来获取被点击的确切元素。

[...document.querySelectorAll("*")].forEach(em => {
  em.addEventListener("click", (e) => {
    e.stopPropagation();
    console.log(e.target)
  })
});

<h1>title</h1>
<div>text inside div
<span>text inside span</span>
</div>

【讨论】：