在最内层元素上调度事件不会导致向上层元素冒泡？

Question

innerDiv = document.getElementById("inner");
innerDiv.onclick = function(e) {
  console.log("PURPLE COLOR DIV");

}

outterDiv = document.getElementsByClassName("outter")[0];
outterDiv.onclick = function(e) {
  console.log("ORANGE COLOR DIV");
};

containerDiv = document.getElementsByClassName("container")[0];
containerDiv.onclick = function() {
  console.log("RED COLOR DIV");
}

setTimeout(() => document.getElementById("inner").dispatchEvent(new Event('click'), {
  bubbles: true
}), 2000)

.container {
  width: 260px;
  height: 170px;
  background-color: maroon;
  padding-top: 40px;
}

.outter {
  width: 200px;
  height: 80px;
  background: orange;
  margin: 0 auto;
  padding-top: 35px;
}

#inner {
  background: purple;
  width: 100px;
  height: 50px;
  margin: auto;
}

<div class="container">
  <div class="outter">
    <div id="inner"></div>
  </div>
</div>

问题

setTimeout 导致 dispatchEvent 触发后，橙色和红色回调不执行。如果 bubbles 属性设置为 true，为什么会这样？在单击 UI 紫色 div 的情况下，冒泡会按预期工作。

Fiddle 示例：http://jsfiddle.net/0tko5qwe/

Answer 1

您需要将选项添加到 Event() 构造函数本身：

new Event('click', { bubbles: true})

innerDiv = document.getElementById("inner");
innerDiv.onclick = function(e) {
  console.log("PURPLE COLOR DIV");

}

outterDiv = document.getElementsByClassName("outter")[0];
outterDiv.onclick = function(e) {
  console.log("ORANGE COLOR DIV");
};

containerDiv = document.getElementsByClassName("container")[0];
containerDiv.onclick = function() {
  console.log("RED COLOR DIV");
}

setTimeout(() => document.getElementById("inner").dispatchEvent(new Event('click', {
  bubbles: true
})), 500)

.container {
  width: 260px;
  height: 170px;
  background-color: maroon;
  padding-top: 40px;
}

.outter {
  width: 200px;
  height: 80px;
  background: orange;
  margin: 0 auto;
  padding-top: 35px;
}

#inner {
  background: purple;
  width: 100px;
  height: 50px;
  margin: auto;
}

<div class="container">
  <div class="outter">
    <div id="inner"></div>
  </div>
</div>

在最内层元素上调度事件不会导致向上层元素冒泡？

dispatch Event on the most inner element doesn't cause bubbling to upper elements?

html

javascript

event-bubbling

dom-events