jQuery鼠标事件不允许移动

我正在创建一个简单的脚本，通过抓取（鼠标向下）面板之间的分隔线来调整面板大小（水平）。（下面我有一个片段要测试）

它第一次工作时效果很好，但有一个bug

每当我按住鼠标左键抓住“#分隔符”并水平调整时，松开鼠标左键即可。但如果第二步是：

（A） 立即再次抓住“#分隔符”并重复=>什么也不发生。它想让我点击屏幕来移动面板

（B） 单击屏幕上的任意位置，然后抓住“#分隔符”并拖动=>它可以正常工作

我需要修复什么，以便用户可以抓住分隔器进行调整，而无需先单击屏幕

$（函数（）{
//将容器对象存储在缓存中
设$container=$（“#container”）；
//当用户在分隔器上按住鼠标时，识别x坐标并存储在容器中。还要注意，我们正在尝试调整面板（“data inmove”=“1”）
$（文档）.on（“鼠标向下”，“分隔符”，函数（e）{
$container.attr（{“数据开始”：e.pageX，“数据移动”：“1”}）；
});
//释放鼠标后，检查是否有等于“1”的“inmove”变量。
//如果是，则更改面板宽度。最后重置变量
$（文档）.on（“mouseup”，函数（e）{
如果（$container.attr（“数据inmove”）==“1”）{
$（“#leftPanel”）.css（“flex”，“0”+（e.pageX-3）+“px”）；
}
$container.attr（{“数据开始”：“0”，“数据结束”：“0”，“数据移动”：“0”}）；
});
});
#container.col{
左侧填充：0px！重要；
右填充：0px！重要；
}
#容器{
宽度：95%；
利润率：10px自动；
边框：1px实心#9292；
最小高度：300px；
位置：相对位置；
}
#左面板{
flex:00200px；
背景颜色：灰色；
}
#分隔器{
弹性：0 0 3px；
背景色：#333；
光标：e-resize；
}
#右面板{
背景色：#fff；
}

抓住面板之间的黑条。水平调整。如果你第二次尝试它（没有点击其他地方），它将不起作用。它将等待您单击该页面。它为什么会这样做？

我想这就是你想要实现的目标。这将创建单独的
mousedown
/
mouseup
事件，将
down
变量设置为true或false。这是在嵌套的
mousemove
上测试的，将
if（$container.attr（“data inmove”）==“1”）{…}
替换为
if（down）{…}

这是新脚本：

  // Creates a boolean if mouse is down
  var down = false;
  // Use mouse events to change it
  $(document).mousedown(function() {
    down = true;
  }).mouseup(function() {
    down = false;  
  }); 

  $(document).on("mousedown", "#divider", function(e) {
    $container.attr({"data-start":e.pageX, "data-inmove":"1"});
    $(document).mousemove(function(e){
      //check if down or not before changing properties
      if(down){
        $("#leftPanel").css("flex", "0 0 " + (e.pageX-3) + "px");
        $container.attr({"data-start":"0", "data-end":"0", "data-inmove":"0"});      
      }
    })
  });

以下是完整的工作代码：


$（函数（）{
设$container=$（“#container”）；
//如果鼠标按下，则创建布尔值
var-down=false；
//使用鼠标事件来更改它
$（文档）.mousedown（函数（）{
向下=真；
}).mouseup（函数（）{
向下=假；
});  
$（文档）.on（“鼠标向下”，“分隔符”，函数（e）{
$container.attr（{“数据开始”：e.pageX，“数据移动”：“1”}）；
$（文档）.mousemove（函数（e）{
//在更改属性之前检查是否关闭
如果（向下）{
$（“#leftPanel”）.css（“flex”，“0”+（e.pageX-3）+“px”）；
$container.attr（{“数据开始”：“0”，“数据结束”：“0”，“数据移动”：“0”}）；
}
})
});
});
#container.col{
左侧填充：0px！重要；
右填充：0px！重要；
}
#容器{
宽度：95%；
利润率：10px自动；
边框：1px实心#9292；
最小高度：300px；
位置：相对位置；
}
#左面板{
flex:00200px；
背景颜色：灰色；
}
#分隔器{
弹性：0 0 3px；
背景色：#333；
光标：e-resize；
}
#右面板{
背景色：#fff；
}

抓住面板之间的黑条。水平调整。如果你第二次尝试它（没有点击其他地方），它将不起作用。它将等待您单击该页面。它为什么会这样做？

它不起作用的原因是您没有在
mousedown
处理程序中执行
e.preventDefault（）
。看看这个答案：


确认只需添加一行即可使用代码，请参阅

PS:chris提出了一个具有更好用户体验的替代解决方案，我对此表示赞赏，但我也想知道为什么这个方案不起作用