Question

我有myDiv.mousedown，window.mousemove和window.mouseup事件。我试图组织我的代码，并让它干净。所以我创建了一个function并返回了3个事件处理程序 mousedown事件会添加mousemove个事件，而mouseup事件会删除mousemove个事件。

问题是，mousemove事件永远不会被删除。 mouseup事件会被触发，但mousemove事件仍然存在。我做错了什么，如何解决它（以干净有序的方式）？

JSFiddle

＆＃13;

var myDiv = document.getElementById('myDiv');

var VeryUsefullClass = (function() {

  function VeryUsefullClass(parentElem, options) {
    var _this = this;
    _this.index = 0;
    _this.mouseHandlerBinded = mouseHandler.bind(_this);

    myDiv.addEventListener('mousedown', _this.mouseHandlerBinded().mouseDown);
    window.addEventListener('mouseup', _this.mouseHandlerBinded().mouseUp);
  }

  function mouseHandler() {
    var _this = this;
    var obj = {
      mouseDown: function(e) {
        console.log('mouseDown');
        window.addEventListener('mousemove', _this.mouseHandlerBinded().mouseMove);
      },
      mouseMove: function(e) {
        myDiv.innerHTML = 'mouseMove ' + _this.index++;
      },
      mouseUp: function(e) {
        console.log('mouseUp');
        _this.index = 0;
        window.removeEventListener('mousemove', _this.mouseHandlerBinded().mouseMove);
      }
    }
    return obj;
  }

  return VeryUsefullClass;
})();

console.clear();

var hello = new VeryUsefullClass();

＆＃13;

#myDiv {
  position: absolute;
  background-color: orange;
  width: 200px;
  height: 100px;
}

＆＃13;

<div id="myDiv"></div>

＆＃13;

Answer 1

_this.mouseHandlerBinded().mouseMove，你将获得一个新函数的函数，从不绑定。

var myDiv = document.getElementById('myDiv');

var VeryUsefullClass = (function() {
     var mdown= mouseHandler().mouseDown;
     var mup = mouseHandler().mouseUp;  
     var mmove; // unbind with this function will work

    function VeryUsefullClass(parentElem, options) {
        var _this = this;
        _this.index = 0;

        mmove = mouseHandler.call(_this).mouseMove;

        myDiv.addEventListener('mousedown', mdown);
        window.addEventListener('mouseup', mup);
    }
    function mouseHandler() {
        var _this = this;
        var obj = {
            mouseDown: function(e) {
                console.log('mouseDown');

                window.addEventListener('mousemove', mmove);
            },
            mouseMove: function(e) {
                myDiv.innerHTML = 'mouseMove ' + (_this.index++);
            },
            mouseUp: function(e) {
                console.log('mouseUp');
                _this.index = 0;
                window.removeEventListener('mousemove', mmove);
            }
        }
        return obj;
    }
    return VeryUsefullClass;
})();

console.clear();

var hello = new VeryUsefullClass();

活动未被删除

JSFiddle

1 个答案: