在前端开拓中，有时我们须要仿照点击页面上的某个位置，比如自动化测试或者仿照用户操作。本日，我将一步步带大家实现这个功能，让大家能够轻松理解并运用。
什么是 x, y 坐标点击？大略来说，x 和 y 坐标便是页面上的一个点的位置。x 代表水平方向，y 代表垂直方向。我们通过这两个数值可以准确地定位到页面上的某个点，然后在这个点上仿照一次点击，就像用户用鼠标点击一样。
我们可以通过 document.elementFromPoint 方法来实现。这个方法会返回指定坐标上的元素，然后我们对这个元素调用 click 方法，就能仿照一次点击。
基本实现步骤
假设我们有以下 HTML 构造：
<div> hello world</div>
我们希望点击这个 div 元素，首先可以写以下代码：
// 监听所有点击事宜，并在掌握台打印被点击的元素document.addEventListener('click', (e) => { console.log(e.target);});// 定义我们要点击的坐标const x = 10;const y = 10;// 获取指定坐标上的元素，并触发点击事宜document.elementFromPoint(x, y).click();
详细阐明：
监听点击事宜：通过 addEventListener 方法，我们可以监听所有的点击事宜，并在掌握台打印被点击的元素。定义坐标：我们定义了 x 和 y 坐标，表示页面上的某个点。获取元素并点击：通过 document.elementFromPoint(x, y) 获取该点上的元素，并对其调用 click 方法来仿照点击。利用 MouseEvent 布局函数除了直接调用 click 方法，我们还可以利用 MouseEvent 布局函数来仿照更繁芜的点击事宜，比如包括点击的位置、是否可以取消等属性。
// 监听所有点击事宜，并在掌握台打印被点击的元素document.addEventListener('click', (e) => { console.log(e.target);});// 定义坐标const x = 10;const y = 10;// 创建一个点击事宜const click = (x, y) => { const ev = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true, 'screenX': x, 'screenY': y }); // 获取指定坐标上的元素 const el = document.elementFromPoint(x, y); // 分发点击事宜 el.dispatchEvent(ev);};// 调用点击函数click(x, y);
详细阐明：
创建点击事宜：我们利用 MouseEvent 布局函数创建一个新的点击事宜，并设置点击位置等属性。参数工具中的每个属性都有特定的浸染：'view': window: 事宜所关联的窗口工具，常日是 window。'bubbles': true: 事宜是否冒泡。true 表示事宜会沿着 DOM 树向上冒泡，触发父元素的事宜监听器。'cancelable': true: 事宜是否可以取消。true 表示可以通过 preventDefault 方法取消事宜的默认行为。'screenX' 和 'screenY': 事宜发生的屏幕坐标位置，这里我们用传入的 x 和 y 值来设置。获取元素并分发事宜：和之前一样，通过 document.elementFromPoint(x, y) 获取元素，然后通过 dispatchEvent 方法分发这个点击事宜。小结通过本文的讲解，我们理解了如何在 JavaScript 中通过 x, y 坐标来仿照点击事宜。无论是直接调用 click 方法，还是利用 MouseEvent 布局函数，都能实现这一功能。希望大家在日常开拓中能用到这个技巧，提升事情效率。
如果你以为本文有帮助，不妨点赞收藏，也可以分享给更多须要的小伙伴。
