Question

我正在摆弄事件冒泡，我为自己创造了典型的3个div，每个人都在练习，我能够让代码工作和事件停止＆＃34;冒泡＆＃34;在哪里我想要的。

我的代码很笨重所以我试着让它更简单一些。通过让我的所有<divs>指向单个函数，该函数会声明如果单击此 <div>，则运行该函数然后停止传播，但我相信我的方式＆＃34;检查＆＃34;点击是错误的。

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

＆＃13;

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);

＆＃13;

 #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;
 }

＆＃13;

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

＆＃13;

Answer 1

使用event.target.id，event.target将返回element event invoked而id属DOMElement的属性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); }

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

$ ps -e|grep node

$kill -9 XXXX

＆＃13;

检查冒泡中的点击元素

1 个答案: