冒泡检查点击的元素

Question

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

我的代码很笨拙，所以我试着让它更简单一些。通过让我所有的 <divs> 指向一个函数，它有一个声明说如果 this <div> 被点击，运行函数然后停止传播，但我相信我的方式 "checking" 点击是错误的。

Link: 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>

冒泡检查点击的元素

Checking Clicked Element in Bubbling

javascript

event-bubbling

propagation