javascript - 检查冒泡中单击的元素

Question

我正在修改事件冒泡，并为自己创建了典型的 3 div 彼此练习，我能够让代码正常工作，并且事件在我想要的地方停止“冒泡”。

我的代码很笨重，所以我尝试让它变得更简单。通过拥有我所有的<divs>指向一个函数，该函数有一条语句，表示 if this <div>被点击，运行该函数，然后停止传播，但我相信我“检查”点击的方式是错误的。

链接:https://jsfiddle.net/theodore_steiner/t5r5kov0/3/

var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");

function showme(event) {
  if (d3.onclick == true) {
    alert("hello")
    event.stopPropagation();
  } else {
    alert("hello");
  }
};

d1.addEventListener("click", showme);
d2.addEventListener("click", showme);
d3.addEventListener("click", showme);

 #d1 {
   height: 300px;
   width: 300px;
   border: 1px solid black;
 }
 #d2 {
   height: 200px;
   width: 200px;
   border: 1px solid black;
 }
 #d3 {
   height: 100px;
   width: 100px;
   border: 1px solid black;
 }

<div id="d1">
  <div id="d2">
    <div id="d3">
    </div>
  </div>
</div>

Answer 1

Use event.target.id as event.target will return element on which event is invoked and id is a property of the DOMElement

Event.target ，对调度事件的对象的引用。

var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");

function showme(event) {
  if (event.target.id == 'd3') {
    alert("hello")
    event.stopPropagation();
  } else {
    alert("hello");
  }
};

d1.addEventListener("click", showme);
d2.addEventListener("click", showme);
d3.addEventListener("click", showme);

#d1 {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
#d2 {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}
#d3 {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

<div id="d1">
  <div id="d2">
    <div id="d3">
    </div>
  </div>
</div>