如何阻止jQuery将输入框外拖放释放误判为点击事件？

这个问题我之前也碰到过，确实挺烦人的——拖选输入框文本到模态框外释放时，被误判成了点击遮罩层的操作，导致模态框意外关闭。咱们可以通过跟踪鼠标的拖拽状态来区分真正的点击和拖放释放，具体实现步骤如下：

核心思路 #

通过标记鼠标是否处于拖拽状态，在点击遮罩层时先判断状态：如果是拖拽后释放，就不执行关闭逻辑；只有真正的点击操作才触发关闭。

具体代码实现 #

// 定义变量标记是否处于拖拽状态
let isDragging = false;

// 监听鼠标按下事件，初始化拖拽状态
$(document).on('mousedown', function() {
  isDragging = false;
});

// 监听鼠标移动事件，一旦移动就标记为拖拽状态
$(document).on('mousemove', function() {
  isDragging = true;
});

// 修改原有的点击事件，加入拖拽状态判断
$('.how').on('click',function(e){
  e.preventDefault();
  
  // 如果是拖拽状态，重置状态并返回，不执行关闭逻辑
  if (isDragging) {
    isDragging = false;
    return;
  }
  
  if(!$(e.target).is('.how')){
    return;
  }
  alert('Modal Closed');
});

代码解释 #

• isDragging变量用来记录当前是否在拖拽文本，初始为false。
• 当鼠标按下（mousedown）时，把状态重置为false，因为此时只是按下还没拖拽。
• 当鼠标移动（mousemove）时，说明正在拖拽文本，把状态设为true。
• 在原来的点击事件里，先检查isDragging：如果是true，说明这是拖放后的释放操作，重置状态并直接返回；只有状态为false时，才执行原来的关闭逻辑。

这样就能完美区分真正的点击和拖放释放操作，避免模态框被误关闭啦～

内容的提问来源于stack exchange，提问作者Crash Override