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

Question

我正在尝试让我的拖放操作在 JavaScript 中正常工作，而不必显式扫描父元素或其他 ID、class 循环和其他 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

没关系，我没有注意到 Event 中的“currentTarget”元素的可用性，它完全符合我的要求寻找。

因此，与其使用“event.target”，不如使用“event.currentTarget”来获得真实的触发事件的父元素。

这是一个有效的 JSFiddle： https://jsfiddle.net/xs20xy27/

更新的 JS：

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

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

function onContainerDrop(ev){
  ev.preventDefault();
  console.log("Drop: " + ev.dataTransfer.getData("text/html"))
  ev.currentTarget.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???

Answer 2

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

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

然后这个事件被作为子元素作为Target和CurrentTarget

传递给子元素的事件处理程序

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

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

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

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

那么当您创建事件处理程序并将第三个参数 useCapture 作为 true.

传递时会发生什么

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

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

关于 CurrentTarget 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.

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

OnDrop Event Target is children when dropped over children, even when Capture phase is used

html

javascript

drag-and-drop

dom-events

event-capturing