博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS如何模拟鼠标点击X,Y坐标
阅读量:5809 次
发布时间:2019-06-18

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

有效的事件类型列表:

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

转载地址:http://frjbx.baihongyu.com/

你可能感兴趣的文章
***CodeIgniter框架集成支付宝即时到账支付SDK
查看>>
Struts2访问ServletAPI的三种方式
查看>>
一周总结
查看>>
将txt文件转化为json进行操作
查看>>
XML
查看>>
【我的总结20170823】多实例部署
查看>>
[MySQL优化案例]系列 — slave延迟很大优化方法
查看>>
线性表4 - 数据结构和算法09
查看>>
C语言数据类型char
查看>>
Python线程详解
查看>>
Online Patching--EBS R12.2最大的改进
查看>>
说说我的web前端之路,分享些前端的好书
查看>>
Binary Search Tree Iterator leetcode
查看>>
Oracle性能优化--DBMS_PROFILER
查看>>
关闭Jquery Ajax 缓存
查看>>
uva-317-找规律
查看>>
Event事件的兼容性(转)
查看>>
CQRS学习——一个例子(其六)
查看>>
12.22 repeater 添加
查看>>
我的2014-相对奢侈的生活
查看>>