事件监听器未删除

Question

我有一个问题，涉及从我的文档中删除事件监听器。 当前，我将该函数添加到“ drag_delta”函数中的文档中，并在“ drag_stop”函数中将其删除。 我试图通过使用clientY数据获取鼠标拖动图像的增量，并将其与“在拖动开始时”事件中的clientY进行比较。 当前代码将一直执行直到drag_stop函数，然后完全忽略它（我尝试打印出“运行”一词以查看其是否确认了它）。 自从我使用React以来，我是用JSX编写的。-Justin

//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);

Answer 1

这与浏览器中的事件处理有关，您可以在鼠标移动的中间绑定鼠标，这意味着事件处理模型在当前鼠标移动事件完成之前不会更新。 因此，当您完成移动事件（拖动并向上移动鼠标）时，新的向上鼠标事件将生效，这由Felix的观察证明。

事件模型与OS中的事件模型不同（Windows / mac，它们可以立即生效），事件过程仅在完成当前过程圈时才更新，对事件处理所做的更改将仅在下一个过程圈开始生效事件处理。