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

代码实现

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

监听效果:
在这里插入图片描述

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-26 14:58:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-26 14:58:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-26 14:58:02       87 阅读
  4. Python语言-面向对象

    2024-04-26 14:58:02       96 阅读

热门阅读

  1. 深入理解汇编中的ZF、OF、SF标志位和条件跳转

    2024-04-26 14:58:02       36 阅读
  2. 若依ruoyi-vue前端组件的使用指南

    2024-04-26 14:58:02       37 阅读
  3. c++17--iota

    2024-04-26 14:58:02       37 阅读
  4. scipy.sparse.lil_matrix

    2024-04-26 14:58:02       31 阅读
  5. 创始人内容:个人及家族的各个事业。

    2024-04-26 14:58:02       39 阅读
  6. 富格林:安全落实防备诱导欺诈建议

    2024-04-26 14:58:02       48 阅读
  7. 【设计模式】使用策略模式优化表单校验逻辑

    2024-04-26 14:58:02       40 阅读