javascript - 即使使用捕获阶段，OnDrop 事件目标也是子对象

Question

我试图让我的拖放操作在 JavaScript 中正常工作，而不必显式扫描父元素或其他 ID、类循环和其他 hacky magic。

现在当我将元素池中的一个元素拖到灰色区域时，该元素被复制到拖放区(到目前为止一切都是正确的)。我基本上是复制拖动元素的 HTML，清除拖放区(目标)并将新元素添加到其中。

当您在放置区中已经有一些子元素并将其拖到子元素上时，问题就开始了。然后 drop 事件中的目标是子元素，而不是事件附加到的 div。这会导致被拖动的元素清除并将自身复制到子元素中，而不是放置容器中。

预期的结果应该是，无论是将它放在子节点上还是直接放在主放置容器上，目标应该始终是父节点，因为我使用的是事件捕获模式。

这是我在 JS Fiddle 中的示例代码。我正在使用带有捕获的事件监听器，但它似乎无论如何都在进行冒泡阶段并忽略捕获阶段。为什么？

执行此操作的正确方法是什么？

function onDrag(ev) {
  var el = ev.target;
  //console.log("Drag: " + ev.target.outerHTML)
  ev.dataTransfer.setData('text/html', ev.target.outerHTML);
}

function onContainerOver(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move"
}

function onContainerDrop(ev) {
  ev.preventDefault();
  //console.log("Drop: " + ev.dataTransfer.getData("text/html"))
  ev.target.innerHTML = ev.dataTransfer.getData("text/html");
}

document.getElementById('target').addEventListener('drop', onContainerDrop, true); // This should not bubble, but it does. Target is always the child first rather than the element where the event listener resides. Why???

#list {}

.el {
  padding: 5px;
  margin: 10px;
  border: solid 1px black;
  background-color: #86d4ff;
  cursor: move;
    line-height: 1em;
    text-align: left;
}

#target {
  min-height: 200px;
  width: 100%;
  background-color: #ffdea6;
  border: 1px dashed gray;
  text-align: center;
  line-height: 100px;
}

<div id="list">
  <div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT A</div>
  <div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT B</div>
  <div class="el" draggable="true" ondragstart="onDrag(event)">ELEMENT C</div>
</div>
<div id="target" ondragover="onContainerOver(event)">
  Drop Here
</div>

原文JSFiddle Link.

Answer 1

当您将任何东西放在子元素上或子元素上发生任何事件时，事件目标 始终是子元素，因为那是事件发生的地方。这就是目标。

┌─────────────────────────────────────┐
│   ┌────────────────────────┐        │
│   │     Child [Target]     │        │
│   └────────────────────────┘        │
│             Parent                  │
└─────────────────────────────────────┘

然后这个事件作为子元素作为Target和CurrentTarget传递给子元素的事件处理程序

┌─────────────────────────────────────┐
│   ┌───────────────────────────────┐ │
│   │ Child [Target][CurrentTarget] │ │
│   └───────────────────────────────┘ │
│         Parent Element              │
└─────────────────────────────────────┘

然后这个事件作为Target的子元素和作为CurrentTarget的父元素传递给父元素的事件处理程序

┌─────────────────────────────────────┐
│   ┌───────────────────────────────┐ │
│   │        Child [Target]         │ │
│   └───────────────────────────────┘ │
│         Parent [CurrentTarget]      │
└─────────────────────────────────────┘

然后事件以相同的方式依次传递给 dom 树中较高的元素，直到到达顶级元素或任何事件处理程序通过调用 event.stopPropagation( )

那么当您创建事件处理程序并将第三个参数 useCapture 作为 true 传递时会发生什么。

parentElement.addEventListener('click', myClickHandler, true);

在这种情况下，事件首先传递给父元素 [currentTarget:Parent]，然后传递给子元素 [currentTarget:Child]，但一如既往， 事件目标始终是子元素，因为这是触发事件的地方。

关于当前目标 this MDN WebDocs page说，

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.