专栏首页一个会写诗的程序员的博客JS如何模拟鼠标点击X,Y坐标

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 条评论
登录 后参与评论

相关文章

  • 页面获取Spring Security登录用户

    spring security 把SPRING_SECURITY_CONTEXT 放入了session 没有直接把username 放进去。下面一段代码主要描述...

    一个会写诗的程序员
  • org.hibernate.QueryException: could not instantiate class [com.ak47.cms.cms.dto.TechArticleDto] f...

    检查一下 DTO 的成员变量, 构造对象的时候, 入参有一个值是null 导致转换异常

    一个会写诗的程序员
  • Spring Data JPA WITH Kotlin

    异常消息: No default constructor for entity: : com.ak47.cms.cms.entity.StockIndex; n...

    一个会写诗的程序员
  • ASP.NET 2.0 中的异步页[来自MSDN]

    ASP.NET 2.0 提供了大量新功能,其中包括声明性数据绑定和母版页,成员和角色管理服务等。但我认为最棒的功能是异步页,接下来让我告诉您其中的原因。 当 A...

    菩提树下的杨过
  • Node.js编程之异步

    异步操作 Node采用V8引擎处理JavaScript脚本,最大特点就是单线程运行,一次只能运行一个任务。这导致Node大量采用异步操作(asynchronou...

    牧云云
  • H3C IPSEC OVER GRE

    py3study
  • VM安装CentOS6-相关NAT上网&VM-tools安装

    安装CentOS步骤略。其中注意:安装默认选择Minimal,可以选择Desktop,或者选择现在自定义,添加一些必要的组件,注意如果选择以后自定义,虚拟机可能...

    斯武丶风晴
  • 如何在旧版本的 .NET Core / Framework 中使用 C# 8 的异步流(IAsyncDisposable / IAsyncEnumerable / IAsyncEnumerator)

    2020-01-03 09:17

    walterlv
  • HW防守|溯源反制攻击方的服务器

    之前答应说分享一篇真实案例,来兑现一下承诺,分享一个攻击队不注意细节被反制并溯源加分的故事。

    PaperPen
  • 自定义控件详解(二):Path类 相关用法

    听着music睡

扫码关注云+社区

领取腾讯云代金券