Question

捕获后将执行冒泡，但是当我在冒泡阶段调用http_client = HTTPClient.new temp_file = Tempfile.open('csv_export_tmp_file') temp_file.write(resource_content) body = { name: <filename>, title: <filetitle>, package_id: <package_id_here>, description: <description>, created: <created_at_time>, upload: temp_file, mimetype: 'text/csv', resource_type: 'file', format: 'csv' } response = http_client.post(resource_create_url, body, [['Authorization', api_key], ['Content-Type', 'multipart/form-data']]) temp_file.close temp_file.unlink时会发生什么？

事件执行流程会改变吗？

stopPropagation()

var element1 = document.getElementsByClassName('element1')[0],
  element2 = document.getElementsByClassName('element2')[0],
  element3 = document.getElementsByClassName('element3')[0],
  foo = function(e) {
    console.log(this.className);
  },
  stop = function(e) {
    console.log('prevent', this.className);
    e.preventDefault();
  },
  stop1 = function(e) {
    console.log('stop', this.className);
    e.stopPropagation();
  };

element1.addEventListener('click', foo); // bubbling
element1.addEventListener('click', foo, true); // caputring
// You cab change handler to "stop"
element2.addEventListener('click', foo);
element2.addEventListener('click', foo, true);
element3.addEventListener('click', stop1);
element3.addEventListener('click', foo, true);

.element1 {
  background-color: #b0c4de;
  height: 160px;
  width: 400px;
  cursor: pointer;
}

.element2 {
  background-color: pink;
  height: 80px;
  width: 300px;
  position: relative;
  top: 20px;
  left: 50px;
}

.element3 {
  background-color: lightgreen;
  height: 30px;
  width: 200px;
  position: relative;
  top: 10px;
  left: 50px;
}

jsfiddle example

对于一个以上的预期输出是

<h3>Please open Chrome console and click element3</h3>
<div class="element1">element1
  <div class="element2">element2
    <div class="element3">element3</div>
  </div>
</div>

输出为

element1
element2
element3
stop element3

Answer 1

stopPropagation阻止当前事件的进一步传播。传播意味着您是否从on元素转到下一个元素（而不是事件侦听器上的表单到下一个元素）。在这种情况下，element3既不在冒泡阶段也不在捕获阶段，而是在目标阶段：

3. DOM Event Architecture

捕获阶段：事件对象通过目标对象的祖先从窗口传播到目标对象的父对象。此阶段也称为捕获阶段。



目标阶段：事件对象到达事件对象的事件目标。此阶段也称为目标阶段。如果事件类型指示事件没有发生，那么该事件对象将在此阶段完成后停止。



泡沫阶段：事件对象以相反的顺序从目标的父级开始，一直传播到目标的祖先，并以Window结束。此阶段也称为冒泡阶段。

因此，如果您处于 target阶段，那么事件处理程序是作为冒泡还是作为捕获附加，则并没有关系，因为在从捕获到捕获的过渡过程中，不会传播到另一个元素。起泡。因此，事件处理程序将按其附加顺序执行，而忽略了阶段标志。

因此，如果调用stopPropagation，则将阻止传播到下一个元素，但是将调用element3的所有事件侦听器，无论是否使用useCapture添加了它们。 / p>

Answer 2

像这样在元素3上切换事件监听器的位置

element2.addEventListener('click', foo, true);
 element3.addEventListener('click', foo, true);
 element3.addEventListener('click', stop1);

停止冒泡时，将首先调用哪个事件？

2 个答案: