代码实现
function simulateClick( x, y) {
// 获取目标元素
const element = document.querySelector("xxxxx");
// 创建一个鼠标移动事件
var mouseMoveEvent = new MouseEvent('mousemove', {
'screenX': x + window.screenX,
'screenY': y + window.screenY,
'clientX': x,
'clientY': y,
buttons: 1 // 按钮状态,1表示按下左键
});
// 在目标元素上触发鼠标移动事件
element.dispatchEvent(mouseMoveEvent);
// 显示视觉反馈
const feedback = document.createElement('div');
feedback.style.position = 'absolute';
feedback.style.width = '10px';
feedback.style.height = '10px';
feedback.style.backgroundColor = 'yellow';
feedback.style.borderRadius = '50%';
feedback.style.left = `${x - 5}px`; // 减去半径以居中显示圆点
feedback.style.top = `${y - 5}px`; // 减去半径以居中显示圆点
feedback.style.pointerEvents = 'none'; // 防止反馈元素阻挡点击事件
element.appendChild(feedback); // 将反馈元素添加到目标元素中
}
simulateClick(276,60);
效果:
监听移动效果:
// 确保目标元素选择器正确,并且元素已经加载到 DOM 中
const element = document.querySelector("xxxxxxxx");
console.info(element);
// 为元素添加mousemove事件监听器
element.addEventListener('mousemove', function(event) {
// event对象包含了关于鼠标事件的信息
const x = event.clientX; // 鼠标指针相对于浏览器窗口可视区的X坐标
console.info(x);
const y = event.clientY; // 鼠标指针相对于浏览器窗口可视区的Y坐标
console.info(y);
// 在控制台输出鼠标的当前位置
console.log(`Mouse moved to (${x}, ${y})`);
});
监听效果: