如何实现按住鼠标自动间隔点击元素并收集选中SVG路径的功能？

原代码示例 #

鼠标事件基础示例 #

console.clear();
document.addEventListener('mouseup', e => console.log("Stop"))
// Keyboard keys
document.addEventListener('mousedown', e => console.log("Hold ") )

Please Click on This Blank Space to simulate the mouseup and mousedown event.

Have a great day !!

SVG路径点击示例 #

let paths = document.querySelectorAll('path');
// paths is an html collection of all paths;
// attach event listeners to each path;
for (let i=0; i<paths.length; i++) {
  paths[i].addEventListener('click', event => console.log(event.target.dataset.key));
} 

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600 " id="svg1">
      <g enable-background="new">
        <path data-key="Line_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 244.34 586.6 "/>
        <path data-key="Line_2" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 124.34 545.57 L 144.34 546.6 "/>
        <path data-key="Line_3" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 174.34 545.57 L 204.34 546.6 "/>            
      </g>
    </svg>
</div>

需求说明 #

现有代码点击SVG路径可输出对应路径ID，需优化实现以下功能：

• 按住鼠标时，每隔固定时间自动点击光标所在位置的元素（悬停在目标路径上时无需手动重复点击）
• 松开鼠标时停止自动点击
• 可从记录的点击数据中提取唯一路径标识，查看选中的所有路径

实现方案 #

核心思路：通过定时器控制自动点击逻辑，结合元素检测与唯一值存储完成需求：

1. 用变量存储定时器ID，用于启动/停止自动循环
2. 维护一个Set对象记录选中的路径标识，自动实现去重
3. mousedown事件触发时启动定时器，每隔指定时间获取光标下的元素，若为目标路径则触发点击
4. mouseup事件触发时清除定时器，终止自动点击
5. 路径点击事件中，将标识存入Set以保证唯一性

完整实现代码 #

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600 " id="svg1">
      <g enable-background="new">
        <path data-key="Line_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 244.34 586.6 "/>
        <path data-key="Line_2" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 124.34 545.57 L 144.34 546.6 "/>
        <path data-key="Line_3" transform="matrix(1,0,0,-1,0,600)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 174.34 545.57 L 204.34 546.6 "/>            
      </g>
    </svg>
    <p>选中的唯一路径：<span id="selectedPaths"></span></p>
</div>

<script>
console.clear();

// 存储选中的唯一路径标识（自动去重）
const selectedPathKeys = new Set();
// 定时器ID，用于控制自动点击循环
let autoClickTimer = null;
// 自动点击间隔（毫秒）
const clickInterval = 300;

// 获取光标位置下的元素
function getElementAtCursor(x, y) {
  return document.elementFromPoint(x, y);
}

// 触发元素点击事件
function triggerElementClick(element) {
  if (element && element.tagName === 'path' && element.dataset.key) {
    element.click();
  }
}

// 路径点击事件处理
function handlePathClick(event) {
  const key = event.target.dataset.key;
  if (key) {
    selectedPathKeys.add(key);
    // 更新页面显示选中的路径
    document.getElementById('selectedPaths').textContent = Array.from(selectedPathKeys).join(', ');
    console.log('点击路径:', key);
  }
}

// 绑定所有路径的点击事件
const paths = document.querySelectorAll('path');
paths.forEach(path => path.addEventListener('click', handlePathClick));

// 鼠标按下时启动自动点击
document.addEventListener('mousedown', (e) => {
  console.log('开始自动点击');
  // 立即触发一次点击，避免等待间隔
  triggerElementClick(getElementAtCursor(e.clientX, e.clientY));
  
  autoClickTimer = setInterval(() => {
    const element = getElementAtCursor(e.clientX, e.clientY);
    triggerElementClick(element);
  }, clickInterval);
});

// 鼠标松开时停止自动点击
document.addEventListener('mouseup', () => {
  console.log('停止自动点击');
  if (autoClickTimer) {
    clearInterval(autoClickTimer);
    autoClickTimer = null;
  }
});
</script>

关键代码说明 #

• selectedPathKeys（Set类型）：自带去重特性，确保每个路径标识只被记录一次
• getElementAtCursor：通过光标坐标获取当前悬停的元素，精准定位目标路径
• setInterval/clearInterval：控制自动点击的启停，mousedown时立即触发一次点击提升用户体验
• 页面新增<span id="selectedPaths">，实时展示选中的唯一路径，方便直观查看

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