5

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

现在，当我拖动元素池中的一个元素并将其拖动到灰色区域时，该元素被复制到放置区域（到目前为止一切都正确）。我基本上是复制拖动元素的 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 链接。

4

2 回答 2

12

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

┌─────────────────────────────────────┐
│   ┌────────────────────────┐        │
│   │     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 ]，但与往常一样，事件目标始终是子元素，因为这是触发事件的地方。

关于CurrentTarget 这个 MDN WebDocs 页面说，

当事件遍历 DOM 时，标识事件的当前目标。它始终指代事件处理程序已附加到的元素，而不是 event.target 标识发生事件的元素。

于 2018-02-05T21:47:17.630 回答
6

没关系，我没有注意到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???
于 2017-12-14T11:44:47.010 回答