事件監聽器沒有刪除

我遇到了一個問題，涉及從我的文檔中刪除事件監聽器。目前，我在我的「drag_delta」函數中將該函數添加到文檔中，並在「drag_stop」函數中將其刪除。我試圖通過使用clientY數據來獲取鼠標拖動圖像的增量，並將其與「on drag start」事件中的clientY進行比較。當前代碼執行到drag_stop函數完全忽略它（我嘗試打印出單詞「run」以查看它是否可以確認它）。我在JSX寫了這個，因爲我使用React.-賈斯汀事件監聽器沒有刪除

//Creation of class, and initial state set 
var Knob = React.createClass({ 
    getInitialState: function(){ 
    return{season: 1}; 
    }, 

drag_start: function(data){ 
    var startPos = data.clientY; 
    console.log(startPos); 
    document.addEventListener("mousemove",this.drag_delta); 
}, 

    drag_delta: function(data){ 
    console.log(data.clientY); 
    this.setState({season: data.clientY}); 
    document.addEventListener("mouseup",this.drag_stop); 
    }, 

    drag_stop: function(data){ 
    document.removeEventListener("mousemove",this.drag_stop); 
    console.log("run"); 
    }, 

render: function(){ 
    return(
      <div> 
      <img src = "../style/img/wood-bg.png" /> 
      <img src ={ '../style/img/Seasons/sprites_cut/'+this.state.season+'.png'} ref = "season" onDragStart = {this.drag_start} /> 
      </div> 
    );//Ed 
    } //end render function 
}); //end knob class 

React.render(<Knob />, mountNode);

來源

2015-09-20 Justin E. Samuels

問題是拖動事件與鼠標事件不同。如果你聽'dragstart'，那麼你必須聽'dragover'和'dragend'（或'drop'）。 'mouseover'和'mouseup'不會被觸發。我建議閱讀關於在MDN上拖放的更多信息：https：//developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop。或者你阻止拖動，在這種情況下，你可能會使用正常的鼠標事件... –

好吧，那麼爲什麼「mousemove」在我的鼠標的每次移動中都會觸發並打印到控制檯？我在JSX中啓動了「onDragStop」，然後在React類中使用「mouseup」作爲普通的javascript。 –

我在這裏做了一個小提琴：https：//jsfiddle.net/5oohsd3q/。你說得對，'mousemove'被觸發，但只有*一次*，而不是連續。釋放鼠標按鈕也不會觸發'mouseup'。你可以看到'mousemove'事件繼續被觸發，直到你再次點擊（'mousedown' + **'mouseup' **）。至少這是我在Chrome和Firefox中觀察到的行爲。 –

這是與在瀏覽器中的事件處理，您綁定在鼠標移動，中間的鼠標了，這意味着事件處理模型在當前鼠標移動事件完成之前不會更新。所以當你完成移動事件（拖拽鼠標）時，你的新鼠標事件將會生效，Felix的觀察證明了這一點。

事件模型與OS中的事件模型不同（windows/mac，它們可以立即生效），事件過程只在當前過程循環完成時更新，您爲事件處理更改的內容只會在生效時生效事件處理的下一個循環。

來源

2015-09-20 01:28:01

事件監聽器沒有刪除

回答

相關問題