js中根據x,y 座標模擬點選事件

玉發表於2019-03-07
JS事件

現在我有個視窗座標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" ?複製程式碼

developer.mozilla.org/zh-CN/docs/…

遍歷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);複製程式碼

參考連結：developer.mozilla.org/enUS/docs/W…

initMouseEvent 方法用於初始化通過 DocumentEvent 介面建立的 MouseEvent 的值。此方法只能在通過dispatchEvent 方法指派 MouseEvent 之前呼叫，儘管在該階段可以多次呼叫它（如有必要）。如果被多次呼叫，則最後一次呼叫優先。


引數說明：
ypeArg - 指定事件型別。
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自定義事件。


有效的事件型別列表:

www.w3school.com.cn/xmldom/met_…


為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;
        });複製程式碼


相關文章