HTML5拖放事件有一个不同的e.target范围

-1

我试图创建一个HTML5拖放实施使用以下模式。HTML5拖放事件有一个不同的e.target范围

<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不公开相同的DOM对象为“这个”将在下面的例子：

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

事实上在上述例子中这个和e.target将是不同的DOM对象共，其中“this”是可拖动对象（tr），e.target是td元素。

有没有一种明智的方式来构建这个类来解决这个问题？

来源

2012-01-17 prototype

不知道你想要什么，但'e.target'是冒泡传播的一个主题。查看[其他事件目标选项]（https://developer.mozilla.org/en/DOM/event/Comparison_of_Event_Targets），特别是'event.currentTarget'。 – katspaugh 2012-01-17 16:41:02

嗨@katspaugh，我很欣赏e.target会受到冒泡。在这种情况下，e.currentTarget实际上会给出与e.target相同的结果。我的观点是事件对象似乎从未暴露出您期望的可拖动目标。 – prototype 2012-01-17 16:59:59

它看起来像你面临的问题是，e.target总是作为最内层的元素而不是事件附加到的元素（el）而出现。

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

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

在这种情况下，您所有的活动，this要提到的ReorderStories实例和this.el会提到你附事件的元素。

来源

2012-01-17 18:58:54

HTML5拖放事件有一个不同的e.target范围

回答

相关问题