浏览器地址栏里敲下一段代码，模拟页面上的鼠标事件按钮自己就动了。这不是点击什么黑客技巧，就是模拟JavaScript的`click()`方法。三行代码，鼠标事件一个真实的点击鼠标点击事件就被伪造了出来：

const btn = document.getElementById('submit'); btn.click();

但`click()`有个毛病——它太干净了。真实用户点按钮时，模拟鼠标会先移过去，鼠标事件按下，点击松开，模拟触发`mousedown`、鼠标事件`mouseup`、点击`click`这一整套顺序。模拟而`click()`直接跳到最后一步，鼠标事件中间的点击状态全被跳过了。有些页面监听`mousedown`做按下动画，你用`click()`触发，动画就永远不出现。

想要完整模拟，得用`MouseEvent`构造函数。这玩意儿能指定你想要的每一个细节：

const rect = btn.getBoundingClientRect(); const event = new MouseEvent('click', {  clientX: rect.left + rect.width / 2, clientY: rect.top + rect.height / 2, bubbles: true, cancelable: true, button: 0 }); btn.dispatchEvent(event);

注意那个`clientX`和`clientY`。我踩过坑——以前写自动化脚本时直接`dispatchEvent(new MouseEvent('click'))`，坐标全是0。结果页面里有个依赖点击坐标的下拉菜单，死活不弹出来。查了半天才发现，坐标0在浏览器左上角，元素根本不在那儿。

还有个细节容易忽略：`bubbles: true`。如果你忘了设这个，事件不会冒泡到父元素。很多框架（比如React 17之前）依赖事件委托，在根节点统一处理事件。不冒泡的事件，React根本收不到，你的模拟点击就石沉大海。

真实场景里最头疼的是那些带拖拽逻辑的组件。比如滑动验证码，它监听的不只是`click`，还有`mousedown`、`mousemove`、`mouseup`的完整链路。只触发一个`click`事件完全没用。这种得按时间顺序依次派发：先`mousedown`到滑块位置，再连续派发几个`mousemove`模拟拖动轨迹，最后`mouseup`松手。

写自动化测试的人最懂这种痛。我见过有人用`setInterval`每50毫秒派发一次`mousemove`，坐标从起点逐步增加到终点。虽然粗糙，但确实能骗过那些检测拖拽行为的代码。不过要是组件内部用了`requestAnimationFrame`做插值，你的模拟轨迹就得跟帧率对齐，否则会被判定为非法操作。

说到底，模拟点击的本质是让代码相信“这是人干的”。有些反作弊系统会检查`event.isTrusted`属性——用脚本构造的事件这个值永远是`false`。这是浏览器设的一道硬墙，目前没有JS能绕过。所以如果你的目标是破解验证码，趁早放弃。但如果只是做自动化测试、批量操作自己页面上的元素，那`dispatchEvent`这套完全够用。

最后留个实用技巧：调试时想知道某个元素绑了什么事件，不用翻源码。在控制台里执行`getEventListeners(btn)`，Chrome会列出所有已注册的监听器。然后你就能精准地知道该模拟哪个事件、带哪些参数。省得瞎猜。