Javascript 为什么使用此函数拖动一个元素时，两个元素都会移动？

我正在尝试制作一个带有两个可拖动手柄的范围滑块。它仍处于早期阶段，在这一点上，我试图让两个手柄在拖动时独立移动

然而，我遇到的问题是，如果我将事件处理程序绑定到

document

当拖动一个句柄时，两个句柄一起移动。如果我绑定到通过选择器参数传入的元素（句柄本身），那么两个句柄都会独立移动，但只有当鼠标指针在该元素的范围内时才起作用，这不是一个好的行为

这是我的密码。我做错了什么

功能可拖动（选择器、选项）{
var options=options |{}；
设el=document.querySelector（选择器）；
var mx=0，
my=0；
var=false；
var偏移量=[0,0]；
var constraint=options.constraint | | false；
如果（选项==未定义）选项=[]；
document.addEventListener（'mousedown'，函数（e）{
拖动=真；
偏移量={
x:el.offsetLeft-e.clientX，
y:el.offsetTop-e.clientY
};
});
document.addEventListener（'mousemove'，函数（e）{
e、 预防默认值（）；
mx=e.clientX；
my=e.clientY；
如果（拖动）{
如果（！constraint | | constraint='x'）el.style.left=（mx+offset.x）+'px'；
如果（！constraint | | constraint='y'）el.style.top=（my+offset.y）+'px'；
}
});
document.addEventListener（'mouseup'，函数（e）{
拖动=假；
});
}
var min=新的可拖动（“#min”{
约束：“x”
});
var max=新的可拖动（“#max”{
约束：“x”
});
正文{
填充：50px；
}
.量程输入{
高度：24px；
位置：相对位置；
}
.铁路{
背景：rgba（0,0,0,0.5）；
边界半径：9px；
位置：绝对位置；
最高：50%；
转换：translate3d（0，-50%，0）；
高度：9px；
宽度：100%；
}
.处理{
背景：#000；
边界半径：50%；
高度：24px；
位置：绝对位置；
最高：50%；
变换：平移3D（0，-50%，0）比例（1）；
宽度：24px；
}
.手柄：悬停{
光标：抓取；
变换：平移3d（0，-50%，0）标度（1.2）；
}
.句柄：活动{
光标：抓取；
}
闵先生{
左：0；
}
麦克斯先生{
右：0；
}
两个元素都注册了一个事件处理程序，该处理程序正在侦听文档上的拖动事件。您的逻辑不包含排除项，因此在窗口中的任何位置单击并拖动操作都将触发您的逻辑

不过我知道你想阻止什么。我认为您希望确保当鼠标在拖动操作（向上或向下）期间离开手柄时，拖动操作继续启动。为此，请在元素上注册mousedown事件。您仍然可以在文档中注册拖动事件，但可以将它们移动到mousedown的事件处理程序中，如下所示：


功能可拖动（选择器、选项）{
var options=options |{}；
设el=document.querySelector（选择器）；
var mx=0，
my=0；
var=false；
var偏移量=[0,0]；
var constraint=options.constraint | | false；
如果（选项==未定义）选项=[]；
el.addEventListener（'mousedown'，函数（e）{
拖动=真；
偏移量={
x:el.offsetLeft-e.clientX，
y:el.offsetTop-e.clientY
};
document.addEventListener（'mousemove'，函数（e）{
e、 预防默认值（）；
mx=e.clientX；
my=e.clientY；
如果（拖动）{
如果（！constraint | | constraint='x'）el.style.left=（mx+offset.x）+'px'；
如果（！constraint | | constraint='y'）el.style.top=（my+offset.y）+'px'；
}
});
document.addEventListener（'mouseup'，函数（e）{
拖动=假；
});
});
}
var min=新的可拖动（“#min”{
约束：“x”
});
var max=新的可拖动（“#max”{
约束：“x”
});
正文{
填充：50px；
}
.量程输入{
高度：24px；
位置：相对位置；
}
.铁路{
背景：rgba（0,0,0,0.5）；
边界半径：9px；
位置：绝对位置；
最高：50%；
转换：translate3d（0，-50%，0）；
高度：9px；
宽度：100%；
}
.处理{
背景：#000；
边界半径：50%；
高度：24px；
位置：绝对位置；
最高：50%；
变换：平移3D（0，-50%，0）比例（1）；
宽度：24px；
}
.手柄：悬停{
光标：抓取；
变换：平移3d（0，-50%，0）标度（1.2）；
}
.句柄：活动{
光标：抓取；
}
闵先生{
左：0；
}
麦克斯先生{
右：0；
}
两个元素都注册了一个事件处理程序，该处理程序正在侦听文档上的拖动事件。您的逻辑不包含排除项，因此在窗口中的任何位置单击并拖动操作都将触发您的逻辑

不过我知道你想阻止什么。我认为您希望确保当鼠标在拖动操作（向上或向下）期间离开手柄时，拖动操作继续启动。为此，请在元素上注册mousedown事件。您仍然可以在文档中注册拖动事件，但可以将它们移动到mousedown的事件处理程序中，如下所示：


功能可拖动（选择器、选项）{
var options=options |{}；
设el=document.querySelector（选择器）；
var mx=0，
my=0；
var=false；
var偏移量=[0,0]；
var constraint=options.constraint | | false；
如果（选项==未定义）选项=[]；
el.addEventListener（'mousedown'，函数（e）{
拖动=真；
偏移量={
x:el.offsetLeft-e.clientX，
y:el.offsetTop-e.clientY
};
document.addEventListener（'mousemove'，函数（e）{
e、 预防默认值（）；
mx=e.clientX；
my=e.clientY；
如果（拖动）{
如果（！constraint | | constraint='x'）el.style.left=（mx+offset.x）+'px'；
如果（！constraint | | constraint='y'）el.style.top=（my+offset.y）+'px'；
}
});
document.addEventListener（'mouseup'，函数（e）{
拖动=假；
});
});
}
var min=新的可拖动（“#min”{
约束：'
.container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0) scale(1);
}