Javascript “处理”；“鼠标镇”；不同对象上的事件

我试图通过鼠标拖动来更改两个条的长度（div）（扩展了eloquetjavascript书中的一个示例，其中包括通过拖动鼠标来更改一个条的长度）。预期的行为是单击任意条，按住鼠标左键时移动鼠标将更改该条的长度

这是我的实现（）

var lastX；//跟踪上次观察到的鼠标X位置
var rect1=document.getElementById（“bar1”）；
var rect2=document.getElementById（“bar2”）；
addEventListener（“mousedown”，function（）{watchmousedown（rect1）}）；
addEventListener（“mousedown”，function（）{watchmousedown（rect2）}）；
函数watchmousedown（rec）{
if（event.which==1）{
lastX=event.pageX；
addEventListener（“mousemove”，function（）{moved（rec）}）；
event.preventDefault（）；//防止选择
}否则{
removeEventListener（“mousedown”，watchmousedown）}
}
已移动功能（rec）{
if（event.which！=1）{
removeEventListener（“mousemove”，已移动）；
}否则{
var dist=event.pageX-lastX；
var newWidth=数学最大值（10，rec.offsetWidth+dist）；
rec.style.width=newWidth+“px”；
lastX=event.pageX；
}
}

问题是我只能更改发生第一次鼠标单击事件的条的长度。我假设我没有正确处理mousedown事件（可能需要重置）

我是javascript新手，非常感谢您对编程风格的帮助

---

谢谢

将

rec.

添加到

addEventListener（“mousemove”，function（）{

以便事件侦听器绑定到您单击的rec，而不是窗口

function watchmousedown(rec) {
    if (event.which == 1) {
        lastX = event.pageX;
        rec.addEventListener("mousemove", function () {
            moved(rec)
        });
        event.preventDefault(); // Prevent selection
    } else {
        rec.removeEventListener("mousedown", watchmousedown)
    }
}

编辑：我发现有一些事件处理程序没有被正确清理。我不知道这是否是我的最终代码，但这更接近我将如何做：

var lastX; // Tracks the last observed mouse X position
var rect1 = document.getElementById("bar1");
var rect2 = document.getElementById("bar2");

var moveRect1 = function () {
    console.log(arguments);
    moved(rect1)
};
var moveRect2 = function() {
    console.log(arguments);
    moved(rect2);   
}
var watchRect1 = function () {
    console.log(arguments);
    watchmousedown(moveRect1)
};
var watchRect2 = function () {
    console.log(arguments);
    watchmousedown(moveRect2)
};

rect1.addEventListener("mousedown", watchRect1);
rect2.addEventListener("mousedown", watchRect2);

window.addEventListener("mouseup", function() {
   removeEventListener("mousemove", moveRect1); 
   removeEventListener("mousemove", moveRect2); 
});

function watchmousedown(moverec) {
    if (event.which == 1) {
        lastX = event.pageX;
        addEventListener("mousemove", moverec);
        event.preventDefault(); // Prevent selection
    }
}

function moved(rec) {
    if (event.which == 1) {
        var dist = event.pageX - lastX;
        var newWidth = Math.max(10, rec.offsetWidth + dist);
        rec.style.width = newWidth + "px";
        lastX = event.pageX;
    }
}

---

编辑：删除了函数watchmousedown中没有任何作用的一行

，第三行是“removeEventListener”（“mousemove”，watchRect1）；”为什么？谢谢，Sisi！嗨，Cici，对不起，我刚才在摆弄，忘了删除那一行。我已经更新了我的答案以删除它。

var lastX; // Tracks the last observed mouse X position
var rect1 = document.getElementById("bar1");
var rect2 = document.getElementById("bar2");

var moveRect1 = function () {
    console.log(arguments);
    moved(rect1)
};
var moveRect2 = function() {
    console.log(arguments);
    moved(rect2);   
}
var watchRect1 = function () {
    console.log(arguments);
    watchmousedown(moveRect1)
};
var watchRect2 = function () {
    console.log(arguments);
    watchmousedown(moveRect2)
};

rect1.addEventListener("mousedown", watchRect1);
rect2.addEventListener("mousedown", watchRect2);

window.addEventListener("mouseup", function() {
   removeEventListener("mousemove", moveRect1); 
   removeEventListener("mousemove", moveRect2); 
});

function watchmousedown(moverec) {
    if (event.which == 1) {
        lastX = event.pageX;
        addEventListener("mousemove", moverec);
        event.preventDefault(); // Prevent selection
    }
}

function moved(rec) {
    if (event.which == 1) {
        var dist = event.pageX - lastX;
        var newWidth = Math.max(10, rec.offsetWidth + dist);
        rec.style.width = newWidth + "px";
        lastX = event.pageX;
    }
}