
JS如何模拟鼠标点击X,Y坐标
发布日期:2021-05-04 16:28:28
浏览次数:20
分类:精选文章
本文共 3193 字,大约阅读时间需要 10 分钟。
现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?
document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagName.toLowerCase(); document.getElementById("out").innerHTML = stag;};var simulateClick = function(){ var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchEvent(evt);}simulateClick();//Why it can not show "input" ?
遍历dom元素,记录每个元素的坐标,找到离(x,y)最近的且z-index最大一个元素,模拟这个dom元素的点击
function imitateClick(oElement, iClientX, iClientY) { var oEvent; if (document.createEventObject) { //For IE oEvent = document.createEventObject(); oEvent.clientX = iClientX; oEvent.clientY = iClientY; oElement.fireEvent("onclick", oEvent); } else { oEvent = document.createEvent("MouseEvents"); oEvent.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, iClientX, iClientY/*, false, false, false, false, 0, null*/); oElement.dispatchEvent(oEvent); } } var body = document.body; body.onclick = function(event) { alert("clicked at (" + event.clientX + "," + event.clientY + ")"); }; imitateClick(body, 100, 100);
其中,
void initMouseEvent(String typeArg, boolean canBubbleArg, boolean cancelableArg, org.w3c.dom.views.AbstractView viewArg, int detailArg, int screenXArg, int screenYArg, int clientXArg, int clientYArg, boolean ctrlKeyArg, boolean altKeyArg, boolean shiftKeyArg, boolean metaKeyArg, short buttonArg, EventTarget relatedTargetArg)
initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。此方法只能在通过dispatchEvent 方法指派 MouseEvent 之前调用,尽管在该阶段可以多次调用它(如有必要)。如果被多次调用,则最后一次调用优先。
参数:
typeArg - 指定事件类型。canBubbleArg - 指定该事件是否可以 bubble。cancelableArg - 指定是否可以阻止事件的默认操作。viewArg - 指定 Event 的 AbstractView。detailArg - 指定 Event 的鼠标单击量。screenXArg - 指定 Event 的屏幕 x 坐标screenYArg - 指定 Event 的屏幕 y 坐标clientXArg - 指定 Event 的客户机 x 坐标clientYArg - 指定 Event 的客户机 y 坐标ctrlKeyArg - 指定是否在 Event 期间按下 control 键。altKeyArg - 指定是否在 Event 期间按下 alt 键。shiftKeyArg - 指定是否在 Event 期间按下 shift 键。metaKeyArg - 指定是否在 Event 期间按下 meta 键。buttonArg - 指定 Event 的鼠标按键。relatedTargetArg - 指定 Event 的相关 EventTarget。
document.createEvent用于创建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型。DOM Level 3增加很多事件类型,个人觉得其中最有用的是CustomEvent自定义事件。
有效的事件类型列表:

image.png
为DOM元素创建自定义事件的步骤为:
一、创建事件:var ev = document.createEvent('CustomEvent');
二、初始化事件:ev.initCustomEvent('自定义事件名称', false(是否允许冒泡), false(是否允许中断),args)
三、为DOM添加事件监听:element.addEventListener('自定义事件名称',fn,false)
四、分发(触发)自定义事件:element.dispatchEvent(ev)
function seth() { this.innerHTML = '12344'; //这里的this 指向分发事件的DOM元素 } var ev = document.createEvent('CustomEvent'); ev.initCustomEvent('myevent', false, false, ''); [].every.call(document.querySelectorAll('div'), function (v, i) { v.addEventListener('myevent', seth, false); v.dispatchEvent(ev); return true; });
发表评论
最新留言
不错!
[***.144.177.141]2025年03月29日 21时37分09秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Java之封装,继承,多态
2021-05-09
wait()与notify()
2021-05-09
使用js打印时去除页眉页脚
2021-05-09
Spring security OAuth2.0认证授权学习第二天(基础概念-RBAC)
2021-05-09
ORA-00904: "FILED_TYPE": 标识符无效
2021-05-09
Redis系统学习之Redis性能测试工具
2021-05-09
数据仓库系列之维度建模
2021-05-09
Scala教程之:函数式的Scala
2021-05-09
java中DelayQueue的使用
2021-05-09
java程序员从小工到专家成神之路(2020版)-持续更新中,附详细文章教程
2021-05-09
线程stop和Interrupt
2021-05-09
Android中定时执行任务的3种实现方法
2021-05-09
nodejs中npm常用命令
2021-05-09
基于Vue2.0+Vue-router构建一个简单的单页应用
2021-05-09
基于vue2.0实现仿百度前端分页效果(二)
2021-05-09
JS魔法堂:函数重载 之 获取变量的数据类型
2021-05-09
时间序列神器之争:Prophet VS LSTM
2021-05-09
SpringBoot中关于Mybatis使用的三个问题
2021-05-09
MapReduce实验
2021-05-09