HTML5 drop 事件具有不同的 e.target 范围答案

【问题标题】：HTML5 drop event has a different e.target to scopeHTML5 drop 事件具有不同的 e.target 范围
【发布时间】：2012-01-17 16:31:49
【问题描述】：

我正在尝试使用以下模式创建 HTML5 拖放实现。

<table>
  <tr draggable=true>
    <td>hello world 1</td>
  </tr>
  <tr draggable=true>
    <td>hello world 2</td>
  </tr>
</table>


var ReorderStories = function() {
};

ReorderStories.prototype = {

  addEvents : function(el) {
    el.addEventListener('dragenter', this, false);
    el.addEventListener('dragover', this, false);
    el.addEventListener('dragleave', this, false);
    el.addEventListener('drop', this, false);
    el.addEventListener('dragend', this, false);

    return el;
  },

  handleEvent : function(e) {

    switch(e.type) {
      case "dragstart": this.handleDragStart(e); break;
      case "dragenter": this.handleDragEnter(e); break;
      case "dragover": this.handleDragOver(e); break;
      case "dragleave": this.handleDragLeave(e); break;
      case "drop": this.handleDrop(e); break;
      case "dragend": this.handleDragEnd(e); break;
    }
  },

  handleDrop : function(e) {
    console.log(this, e.target);
  }
}

使用这种模式，我可以在放置处理程序中维护类的范围，这很棒，因为我可以引用该类的所有其他属性和函数。然而，事实证明 e.target 并没有像以下示例中的“this”那样暴露相同的 dom 对象：

el.addEventListener('drop', function(){ 
  console.log(this, e.target)
}, false);

实际上在上面的例子中 this 和 e.target 完全是不同的 dom 对象，其中 "this" 是可拖动对象 (tr) 而 e.target 是 td 元素。

有没有一种合理的方法来构建这个类来解决这个问题？

【问题讨论】：

不确定你想要什么，但e.target 是冒泡传播的主题。见other event target options，尤其是event.currentTarget。
嗨@katspaugh，我很欣赏 e.target 会冒泡。在这种情况下，e.currentTarget 实际上会给出与 e.target 相同的结果。我的观点是，事件对象似乎永远不会公开您所期望的可拖动目标。

标签： javascript html drag-and-drop

【解决方案1】：

看起来您面临的问题是 e.target 总是作为最里面的元素出现，而不是事件附加到的元素 (el)。

（对我而言）最合乎逻辑的方法是每个元素只有一个 ReorderStories 实例。你可以这样做：

var ReorderStories = function(el) {
    this.el = el;
    this.addEvents(el);
};

在这种情况下，在您的所有事件中，this 将引用 ReorderStories 的实例，this.el 将引用您将事件附加到的元素。

【讨论】：