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

简介: 现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?document.body.onclick = function(){ e = arguments[0]; var dt = e.

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

img_bf86f375a50f2dfd2239584b12ecf605.png
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;
        });
相关文章
|
14天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
34 0
|
7月前
|
JavaScript 前端开发
使用JavaScript,点击按钮一个打开新的窗体
使用JavaScript,点击按钮一个打开新的窗体
|
7月前
|
JavaScript
js点击button,在页面上创建一个三行四列的表格
js点击button,在页面上创建一个三行四列的表格
178 0
|
18天前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
15 0
JS+CSS3点击粒子烟花动画js特效
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
|
1月前
|
JavaScript
|
3月前
|
JavaScript
用html,js和layui写一个简单的点击打怪小游戏
用html,js和layui写一个简单的点击打怪小游戏
25 0
|
3月前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
11 0