美文网首页编程笔记
JS如何模拟鼠标点击X,Y坐标

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

作者: 光剑书架上的书 | 来源:发表于2018-09-13 23:53 被阅读839次

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

相关文章

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

    现在我有个窗口坐标X,Y. 如何利用JS点击该坐标? https://developer.mozilla.org/...

  • 关于验证码--Puppeteer

    动态验证码 1. 点击式点击式验证码,记录一组鼠标点击值(x,y坐标值) 作为参数发送给后端,再模拟一组点击事件,...

  • android adb shell循环模拟点击

    shell循环模拟点击 连接adb后输入 adb shell input tap X坐标 Y坐标左边 adb s...

  • AutoIt模拟鼠标操作

    MouseClick ( “按钮” [, X坐标, Y坐标 [, 点击次数 [, 速度 ]]] ) 按钮(默认点击...

  • client距离

    //当事件触发时,鼠标点击距离游览器坐标轴的距离,根据点击的位置不同可以得到不同的X和Y值offsetleft:指...

  • 拖动的模态框

    核心原理1、给窗口title绑定鼠标按下事件;2、获取鼠标到login盒子的x,y坐标存为变量(x=e.pageX...

  • 【个人提升】canvas气泡漂浮动画

    canvas气泡漂浮动画实现效果思路: 1.获取鼠标移动的x、y坐标 //鼠标滑动 canvas.onmousem...

  • js模拟点击鼠标右键

    前提是该元素已绑定事件如果没有事件,右键是系统默认的右键菜单 因此,先给元素绑定个右键事件: 再来模拟右键菜单 如...

  • Vue 鼠标事件

    鼠标事件示例:可以实时获得鼠标的x、y轴数据! 编写js文件(事件方法): 在html中引入js文件: 编写css...

  • JS距离那些事

    浏览器相关距离 以X,Y结尾的几位都与鼠标事件相关,包括onclick(点击鼠标), mousedown(鼠标按下...

网友评论

    本文标题:JS如何模拟鼠标点击X,Y坐标

    本文链接:https://www.haomeiwen.com/subject/cwhngftx.html