如何在JavaScript/jQuery中禁用mousemove事件？修复鼠标释放后事件残留问题

问题原因 #

每次触发mousedown时，你都会给图片重复绑定mousemove和mouseup事件。第一次鼠标抬起时，只能移除本次绑定的mousemove，但之前多次mousedown绑定的旧mousemove事件依然存在，导致后续鼠标移动时这些事件会持续触发。

修复方案1：使用事件命名空间 #

通过给事件添加命名空间，可以一次性移除同命名空间下的所有事件，避免重复绑定的残留问题：

$("#myImage").on("mousedown", function (e) {
    console.log("mousedown");
    // 先移除该命名空间下的旧事件，再绑定新的
    $(this).off(".drag")
           .on("mousemove.drag", function (e) {
               console.log(e.offsetX);
           })
           .on("mouseup.drag", function (e) {
               console.log("mouseup");
               $(this).off(".drag"); // 移除命名空间下的所有事件
           });
});

修复方案2：绑定mouseup到document（更健壮） #

如果鼠标移出图片后再抬起，图片元素上的mouseup不会触发，会导致mousemove一直处于监听状态。把mouseup绑定到document上可以解决这个问题，同时通过函数引用精确解绑事件：

$("#myImage").on("mousedown", function (e) {
    const $img = $(this);
    console.log("mousedown");

    // 定义事件处理函数
    function handleMouseMove(e) {
        console.log(e.offsetX);
    }

    function handleMouseUp() {
        console.log("mouseup");
        $img.off("mousemove", handleMouseMove);
        $(document).off("mouseup", handleMouseUp);
    }

    $img.on("mousemove", handleMouseMove);
    $(document).on("mouseup", handleMouseUp);
});

说明 #

方案2的优势在于：无论鼠标在页面哪个位置抬起，都能触发mouseup事件并停止mousemove监听，避免了鼠标移出元素后无法停止事件的隐患，同时通过绑定具体的函数引用，不会误删其他无关事件。

内容的提问来源于stack exchange，提问作者Javad-M