属性更改onmousedown无法使用多个元素

Question

我尽可能地尝试简化代码。我要做的是实现一种调整某些元素大小的方法。为此，我创建了一个<div class="resize-on">（它是橙色的）然后如果你单击并按住鼠标然后移动那么就会发生一些动作

var Ui = {};

Ui.Resizer = function (element) {

    this.isResizing = false;

    this.element = element;

    this.resizer = document.createElement("div");
    this.resizer.classList.add('resize-on');
    var toWrap = this.element;
    var parent = toWrap.parentNode;
    var next = toWrap.nextSibling;
    this.resizer.appendChild(toWrap);
    parent.insertBefore(this.resizer, next);
  
   this.resizer.onmousedown = function(event) {
        this.isResizing = true;
        console.log('onmousedown', this.isResizing);
    }.bind(this);

    document.querySelector("body").onmousemove = function(event) {
        if(this.isResizing) {
            console.log('onmousemove', this.isResizing);
        }
    }.bind(this);
    
    document.querySelector("body").onmouseup = function(event) {
        this.isResizing = false;
        console.log('mouse up');
    }.bind(this);
};


(function() {
    Array.prototype.forEach.call(
        document.querySelectorAll('.resizable'),
        function (element) {
            new Ui.Resizer(
                element
            );
        }
    );
})();

.resize-on {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two resizable">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
    <div class="five">five</div>
</div>

所以这很好。

现在的问题是，如果我有多个resizable元素，它就不起作用。然后它只适用于“最后一个”（在这种情况下<div class="four resizable">four</div>）为什么？

元素<div class="two resizable">two</div>获取了mousedown但不再显示onmousemove。

这与上面完全相同的代码。刚刚将resizable类添加到另一个HTML元素中。我无法理解为什么这不起作用。任何人都可以对此有所了解吗？我还需要改变什么才能让它发挥作用？

var Ui = {};

Ui.Resizer = function (element) {

    this.isResizing = false;

    this.element = element;

    this.resizer = document.createElement("div");
    this.resizer.classList.add('resize-on');
    var toWrap = this.element;
    var parent = toWrap.parentNode;
    var next = toWrap.nextSibling;
    this.resizer.appendChild(toWrap);
    parent.insertBefore(this.resizer, next);

   this.resizer.onmousedown = function(event) {
        this.isResizing = true;
        console.log('onmousedown', this.isResizing);
    }.bind(this);

    document.querySelector("body").onmousemove = function(event) {
        if(this.isResizing) {
            console.log('onmousemove', this.isResizing);
        }
    }.bind(this);

    document.querySelector("body").onmouseup = function(event) {
        this.isResizing = false;
        console.log('mouse up');
    }.bind(this);
};


(function() {
    Array.prototype.forEach.call(
        document.querySelectorAll('.resizable'),
        function (element) {
            new Ui.Resizer(
                element
            );
        }
    );
})();

.resize-on {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two resizable">two</div>
    <div class="three">three</div>
    <div class="four resizable">four</div>
    <div class="five">five</div>
</div>

Answer 1

使用addEventListener进行活动。在body元素上使用属性onmousemove和其他元素只允许你添加一个事件监听器，因为前一个将被覆盖，因此为什么只有最后一个完成，在这种情况下是一个对于“四”，作品。

document.querySelector("body").addEventListener("mousemove", function(event) {
    this.isResizing = false;
    console.log('mouse up');
}.bind(this);

虽然你可以做到这一点，但你只需要设置一个只有一点修改的监听器。

Ui.Resizer = function(element){
     //...other code
     this.resizer.onmousedown = function(event) {
        //Set a property on Ui for use to know which Resizer is active and 
        //access it in the body events.
        Ui.active = this;
     }.bind(this);
     //...rest of code excluding body events (mousemove, mouseup)
};
document.body.addEventListener("mousemove",function(event){
   if(Ui.active){
      //if Ui.active is set, active will be the Resizer instance
      //and therefore can access the element it was created for
      //by using active.element
      console.log("mousemove",Ui.active.element);
   }
});
document.body.addEventListener("mouseup",function(event){
   if(Ui.active){
      console.log("mouseup",Ui.active.element);
      //clear active 
      Ui.active = null;
   }
});

演示

var Ui = {};

Ui.Resizer = function(element) {
  this.isResizing = false;

  this.element = element;

  this.resizer = document.createElement("div");
  this.resizer.classList.add('resize-on');
  var toWrap = this.element;
  var parent = toWrap.parentNode;
  var next = toWrap.nextSibling;
  this.resizer.appendChild(toWrap);
  parent.insertBefore(this.resizer, next);
  this.resizer.onmousedown = function(event) {
    //Set a property on Ui for use to know which Resizer is active and 
    //access it in the body events.
    Ui.active = this;
  }.bind(this);
};
document.body.addEventListener("mousemove", function(event) {
  if (Ui.active) {
    //if Ui.active is set, active will be the Resizer instance
    //and therefore can access the element it was created for
    //by using active.element
    console.log("mousemove", Ui.active.element);
  }
});
document.body.addEventListener("mouseup", function(event) {
  if (Ui.active) {
    console.log("mouseup", Ui.active.element);
    //clear active 
    Ui.active = null;
  }
});

(function() {
    Array.prototype.forEach.call(
        document.querySelectorAll('.resizable'),
        function (element) {
            new Ui.Resizer(
                element
            );
        }
    );
})();

.resize-on {
  background-color: orange;
}

<div class="wrap">
    <div class="one">One</div>
    <div class="two resizable">two</div>
    <div class="three">three</div>
    <div class="four resizable">four</div>
    <div class="five">five</div>
</div>