事件监听器没有删除

我遇到了一个问题，涉及从我的文档中删除事件监听器。目前，我在我的“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

事件监听器没有删除

回答

相关问题