js 实现点击事件时，给对应的element添加一个可视反馈

本文主要是介绍js 实现点击事件时，给对应的element添加一个可视反馈，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现代码

function simulateMoveAndClick(element, x, y) {  // 创建并分发鼠标移动事件  const moveEvent = new MouseEvent('mousemove', {  'view': window,  'bubbles': true,  'cancelable': true,  'screenX': x + window.screenX,  'screenY': y + window.screenY,  'clientX': x,  'clientY': y,  'ctrlKey': false,  'altKey': false,  'shiftKey': false,  'metaKey': false,  'button': 0, // 无按钮按下  'relatedTarget': null  });  element.dispatchEvent(moveEvent);  // 等待一段时间以模拟真实的鼠标移动（可选）  setTimeout(() => {  // 创建并分发点击事件  const clickEvent = new MouseEvent('click', {  'view': window,  'bubbles': true,  'cancelable': true,  'screenX': x + window.screenX,  'screenY': y + window.screenY,  'clientX': x,  'clientY': y,  'ctrlKey': false,  'altKey': false,  'shiftKey': false,  'metaKey': false,  'button': 0, // 左键点击  'relatedTarget': null  });  element.dispatchEvent(clickEvent);  // 显示视觉反馈  const feedback = document.createElement('div');  feedback.style.position = 'absolute';  feedback.style.width = '10px';  feedback.style.height = '10px';  feedback.style.backgroundColor = 'green';  feedback.style.borderRadius = '50%';  feedback.style.left = `${x - 5}px`; // 减去半径以居中显示圆点  feedback.style.top = `${y - 5}px`; // 减去半径以居中显示圆点  feedback.style.pointerEvents = 'none'; // 防止反馈元素阻挡点击事件  element.appendChild(feedback); // 将反馈元素添加到目标元素中 }, 1000); // 等待100毫秒，模拟用户将鼠标移动到位置后稍作停顿再点击  // 在控制台输出点击的坐标  console.log(`Simulated move and click at (${x}, ${y})`);  
}