Javascript 为什么Firefox在拖动时会在overflow:hidden元素外启动mousemove，而不是在overflow:visible时启动mousemove？

我刚刚发现了这个，无法解释为什么它会这样。但这正是我想要实现的行为。试试这个例子：

const redBar=document.querySelector（“红色”）；
const greenBar=document.querySelector（“绿色”）；
redBar.onmousemove=moveHandle；
redBar.onclick=moveHandle；
greenBar.onmousemove=moveHandle；
greenBar.onclick=moveHandle；
函数moveHandle（事件）{
如果（event.buttons===1 | | event.type===“单击”）{
设y=（event.y-this.offsetTop）-7.5；
如果（y<-7.5）{
y=-7.5；
}否则，如果（y>this.offsetHeight-7.5）{
y=这一点。远视-7.5；
}
this.querySelector（“.handle”）.style.top=y+“px”；
}
}

正文{
显示器：flex；
宽度：100vw；
高度：100vh；
证明内容：中心；
对齐项目：居中；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：行；
}
.酒吧{
位置：相对位置；
背景：红色；
溢出：可见；
利润率：30像素；
宽度：30px；
高度：200px；
}
1.没有溢出{
背景：绿色；
溢出：隐藏；
}
.处理{
位置：相对位置；
宽度：60px；
高度：15px；
顶部：-7px；
左：-15px；
背景：#222d；
}

---

Firefox中的

鼠标移动

因

溢出而失灵：隐藏

看起来像/

至于在不依赖缺陷的情况下实现此效果，则：

---

通常，这是通过监听元素上的mousedown来完成的，当触发时，停止监听mousedown并开始监听文档上的mouseup和mousemove。当mouseup触发时，停止侦听mouseup和mousemove，然后再次开始侦听元素上的mousedown

---

指针事件API（）是实现此行为的现代方法（Safari和旧版本浏览器需要一个指针）。

通常通过监听元素上的mousedown来完成，当触发时，停止监听mousedown并开始监听

文档上的mouseup和mousemove

。当mouseup触发时，停止监听mouseup和mousemove，再次开始监听mousedown元素。是的，我通常就是这样做的，但这变得相当混乱（至少在我对javascript的经验不如现在的时候）。此外，这比仅仅将父溢出设置为隐藏和归档完全相同的内容要多得多的代码。这一点也不混乱，但需要更多的代码。您可以创建一个类或原型对象，并通过创建新实例轻松地为多个元素实现它。没有多少行代码。我不知道我以前写过什么样的狗屁代码（当然没有使用类）。谢谢你的提示。现在这个错误确实困扰着我，因为当我当前更改红色条的值时，绿色条的值仍然会更改。将用户选择更改为“无”是解决此问题的方法。我不喜欢ES6类，我仍然发现旧的好原型更灵活。