JS如何模拟鼠标点击X,Y坐标

现在我有个窗口坐标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" ?

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

遍历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);

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent

其中,

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自定义事件。

有效的事件类型列表:

http://www.w3school.com.cn/xmldom/met_document_createevent.asp#eventType

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CIT极客

【奇淫巧技】成为网站开发工程师的捷径!

3869
来自专栏vue学习

小程序 — 实现左滑删除效果(列表)③

首先我们初始化一个list列表并为其添加数据,这个列表有两个值分别为标题文字title和初始的偏移量x:

2353
来自专栏vue学习

小程序 — 选项卡

(2)将用户点击传过来的index值赋给data中改变当前的索引值activeIndex

2792
来自专栏hbbliyong

Android Studio 快捷键

Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入...

3076
来自专栏技术博客

ExtJs二(实现登录)

  在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

2161
来自专栏熊二哥

Javascript快速入门(下篇)

Javascript, cheer up。 ? ? Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用...

2047
来自专栏Flutter入门到实战

开发工具总结(5)之Markdown语法图文全面详解及其工具介绍

版权声明:本文为博主原创文章(少量文字参考他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/c0a2897a...

2784
来自专栏进击的君君的前端之路

即时通讯系统(一)

2024
来自专栏个人随笔

表单

一.表单    表单就是一个将用户信息组织起来的容器:       <将需要用户填写的内容放置在表单容器中,当用户单击"提交"按钮的时候,表单会将数据统一发送给...

2939
来自专栏闻道于事

JavaScript面向对象之Windows对象

JavaScript之Window对象 首先我们先了解一个概念:事件。 事件,就是把一段代码设置好,满足条件时触发。或者说,事件是可以被 JavaScript ...

3099

扫码关注云+社区

领取腾讯云代金券