模拟点击首先要区分是点击dom本身还是在点击dom节点上的指定位置
js// 先来抓取一下全局的点击事件吧
document.addEventListener("click", (e) => {console.log(e, '监听点击')})
jsdocument.querySelector("#id").click()
在上面的代码中,首先获取需要点击的元素和坐标位置。然后,创建一个 MouseEvent 对象,设置事件类型为 'click',并指定触发事件的坐标位置。最后,使用 dispatchEvent 方法在指定元素上触发该事件。
js/*
* domId 为dom的id类名
* 获取需要点击的坐标位置
* x = 横坐标 y = 纵坐标
* type 为点击类型
* */
function eventDomClick (domId, x, y, type) {
// 获取需要点击的元素
const element = document.getElementById(domId);
// 创建模拟点击事件对象
const clickEvent = new MouseEvent(type ? type : 'click', {
view: window,
bubbles: true,
cancelable: true,
clientX: x, // 横坐标
clientY: y, // 纵坐标
button: 0, // 左键点击
});
// 在指定坐标位置触发点击事件
element.dispatchEvent(clickEvent);
}
当然,这里涉及一个isTrusted授信问题
如果您在使用 JavaScript 时遇到了 isTrusted 属性为 false 的事件,这通常表示该事件是由浏览器或 JavaScript 本身产生的,而不是由用户与页面交互产生的。这可能是由于某些原因导致事件冒泡或捕获不正确,或者事件处理程序在错误的上下文中被调用。
解决这个问题的方法取决于具体情况,以下是一些可能的解决方案:
- 检查事件处理程序是否正确绑定:确保事件处理程序已正确绑定到 DOM 元素。您可以使用浏览器的开发者工具来检查事件处理程序是否已绑定到正确的元素。
- 检查事件冒泡是否正确:如果事件处理程序绑定到父元素而不是子元素,则可能需要使用 event.stopPropagation() 方法来阻止事件冒泡到父元素。
- 检查事件捕获是否正确:如果事件处理程序绑定到子元素而不是父元素,则可能需要使用 event.stopImmediatePropagation() 方法来阻止事件被捕获到父元素。
- 检查事件处理程序是否在正确的上下文中被调用:如果您在事件处理程序内部使用 setTimeout 或 setInterval 等方法,则可能需要在全局作用域中调用它们,以确保它们在正确的上下文中被执行。
- 更新浏览器或操作系统:某些问题可能是由于浏览器或操作系统版本过旧导致的。尝试更新您的浏览器或操作系统版本,看看是否解决了问题。
如果以上方法都无法解决问题,您可以尝试在开发者工具中调试代码,以查看是否有其他错误或异常情况导致 isTrusted 属性为 false。
本文作者:seek
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!