-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元素。
有没有一种明智的方式来构建这个类来解决这个问题?
不知道你想要什么,但'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