检查冒泡中单击的元素

Question

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

我的代码很笨重，所以我试着让它更简单一点。通过让我所有的<divs> 指向一个函数，该函数有一个声明说如果 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

将event.target.id 用作event.target 将返回element，其中event 是invoked，id 是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>