如何在jQuery/JS中监听鼠标左键（LMB）按住状态以切换变量？

嘿，我完全懂你的需求——你需要在按住鼠标左键的整个时间段里持续控制pull_or_push变量，而不是只在按下/松开的瞬间触发一次。mousedown和mouseup确实只是单次触发的事件，所以我们得结合定时器来模拟“持续触发”的效果，具体方案如下：

核心思路 #

1. 用mousedown事件启动一个重复执行的定时器，在按住期间持续执行你的状态更新逻辑；
2. 用mouseup和mouseleave事件清除定时器，同时重置状态（避免鼠标移出页面后定时器还在运行）；
3. 用一个变量保存定时器ID，方便后续停止定时器。

完整代码示例 #

// 初始化状态
let pull_or_push = "push";
// 保存定时器ID，用于后续清除
let holdInterval;

// 鼠标左键按下时启动持续逻辑
$(document).on("mousedown", function() {
  // 先切换到按住时的状态
  pull_or_push = "pull";
  
  // 启动定时器，每隔10ms执行一次（可根据动画流畅度调整间隔）
  holdInterval = setInterval(() => {
    // 这里写你需要持续执行的逻辑
    // 比如持续更新动画参数、打印状态，或者切换状态（如果需要的话）
    console.log("当前状态:", pull_or_push);
    
    // 示例：如果需要在按住期间来回切换状态，可取消下面注释
    // pull_or_push = pull_or_push === "pull" ? "push" : "pull";
  }, 10);
});

// 鼠标松开或移出页面时停止持续逻辑
$(document).on("mouseup mouseleave", function() {
  // 清除定时器，停止持续执行
  clearInterval(holdInterval);
  // 重置状态为初始值
  pull_or_push = "push";
  console.log("状态已重置为:", pull_or_push);
});

关键细节说明 #

• 定时器间隔：示例中用了10ms，这个值越小，状态更新越频繁，动画会更流畅，但过短的间隔可能会影响性能，建议根据你的动画需求调整（比如30-50ms也是常用的流畅区间）；
• mouseleave事件：必须加上这个，否则用户按住鼠标后移出浏览器窗口，定时器会一直运行，导致内存浪费或逻辑异常；
• 状态逻辑灵活调整：你可以在定时器的回调里自由修改pull_or_push的逻辑——比如保持固定状态、循环切换，或者关联你的动画参数更新，完全适配你的需求。

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