js 模拟鼠标移动事件，并监听鼠标移动

最新推荐文章于 2024-06-03 15:18:42 发布

安静的镜子

最新推荐文章于 2024-06-03 15:18:42 发布

阅读量598

点赞数 2

文章标签： javascript 计算机外设前端

本文链接：https://blog.csdn.net/weixin_42883164/article/details/138184043

版权

代码实现

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})`);  
  
});