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範圍

回答

相關問題