MouseUp 事件在 MouseDown 之后没有运行

Question

尝试构建一个滚动条，当您单击并按住鼠标按钮并开始沿 Y 轴移动时，它将以一定的灵敏度向上或向下移动站点。一切正常，滚动流畅，完全符合我的要求。问题是，当您停止按住鼠标按钮时，它仍在鼠标移动时上下移动站点。

我的代码

scrollbar.addEventListener("mousedown", scrollWhenMove);
body.addEventListener("mouseup", stopScroll);
function scrollWhenMove()
{
    scrollbar.addEventListener("mousemove", function() {onmove(event)})
    function onmove(event)
    {
        var moved = event.movementY;
        if(moved !== 0)
        {
            document.documentElement.scrollTop += (moved * 3);
        }
    }
}
function stopScroll()
{
        document.documentElement.scrollTop = 0;
        return false;
}

有什么解决办法吗？

Answer 1

调用stopScroll时，您可以使用removeEventListener停止监听鼠标移动。

但是，请注意，只有当您向它传递与之前 addEventListener 中传递的函数相同的引用时，它才会起作用：

// 2 different anonymous functions won't work
scrollbar.addEventListener("mousemove", function() { onmove(); });
scrollbar.removeEventListener("mousemove", function() { onmove(); });

// OK, same reference
scrollbar.addEventListener("mousemove", onmove);
scrollbar.removeEventListener("mousemove", onmove);

演示：

scrollbar.addEventListener("mousedown", scrollWhenMove);
document.body.addEventListener("mouseup", stopScroll);

function scrollWhenMove() {
  scrollbar.addEventListener("mousemove", onmove);
}

function stopScroll() {
  scrollbar.removeEventListener("mousemove", onmove);
}

function onmove(event) {
  var moved = event.movementY;
  if (moved !== 0) {
    document.documentElement.scrollTop += (moved * 3);
  }
}

img {
  display: block;
  max-width: 90%;
}

#scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: #f00;
}

<img src="https://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg">

<div id="scrollbar"></div>

Answer 2

默认行为是从运行停止 mouseMove 和 mouseUp，您基本上可以通过将 event.preventDefault() 添加到 mousedown 函数

来解决这个问题

请确保您使用在 mousedown 函数中传递的相同参数名称来触发 preventDefault()，否则它将不起作用，在下面的示例中，我将事件作为参数传递给 mousedown 函数，然后触发 preventDefault () 输入 event.preventDefault()

 let mousePosStart, isDown = false;

 function mousedown(event) {
        if (isDown == false) {
            mousePosStart = event.pageX - this.offsetLeft;
            isDown = true;
            event.preventDefault();
        }
    }

    function mousemove(event) {
        if (isDown == true) {
            let mousePosMove = event.pageX - this.offsetLeft;
        }
    }

    function mouseup(event) {
        if (isDown === true) {
            isDown = false;
            let mousePosEnd = event.pageX - this.offsetLeft;
        }
    }

MouseUp 事件在 MouseDown 之后没有运行

MouseUp Event doesn't run after MouseDown

javascript

dom-events

mouseup

MouseUp 事件在 MouseDown 之后没有 运行

MouseUp Event doesn't run after MouseDown

javascript

dom-events

mouseup

MouseUp 事件在 MouseDown 之后没有运行