Question

考虑以下HTML代码：

<section>

每次点击上述某个方框时，我想更改import codecs import re regex = r'\D(?!\d)' # read a contract in with codecs.open("/Users/someuser/x/y/blah.txt", "r","utf-8") as ins: text = ins.read() # perform magics output = re.findall(regex, text) output的颜色。我不介绍CSS。是否有可能而不是在3个盒子上使用3个事件监听器才能只使用一个？我听说过片段。任何的想法？

Answer 1

您可以在<section>上使用包含三个<div>元素的单个侦听器，然后检查event.target以查看其中一个是否被点击。因此，只有当您单击三个框中的一个而不是父<section>元素时，您的代码才会运行。

这是一个例子。为了清楚起见，我添加了ID，类和一些CSS。

＆＃13;

var section = document.getElementById("container");

container.addEventListener("click", function(e) {
  if (e.target.className == "box") {
    // You clicked on a box
    container.style.backgroundColor = e.target.style.backgroundColor;
  }
});

document.getElementById("left-box").style.backgroundColor = "red";
document.getElementById("middle-box").style.backgroundColor = "green";
document.getElementById("right-box").style.backgroundColor = "blue";

＆＃13;

#container {
  background-color: yellow;
  display: inline-block;
  padding: 10px;
}

#container>div {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid yellow;
  display: inline-block;
}

＆＃13;

<section id="container">
  <div class="box" id="left-box"></div>
  <div class="box" id="middle-box"></div>
  <div class="box" id="right-box"></div>
</section>

＆＃13;

Answer 2

如果您将事件监听器附加到section，那么您可以找到被点击的元素。

var section = document.getElementsByTagName('section')[0];
section.addEventListener('click', function(e) {
    console.log(e.toElement);
});

多个子元素的单个事件监听器

2 个答案: