1. 程式人生 > >JavaScript 模擬鍵盤事件和滑鼠事件(比如模擬按下回車等)

JavaScript 模擬鍵盤事件和滑鼠事件(比如模擬按下回車等)

最近程式碼中有個功能需要用到手動觸發鍵盤事件的功能。但鍵盤事件的fire在各瀏覽器下實現不一樣,下面分別說明:

1. IE下沒什麼問題,建立事件物件、對物件的keyCode屬性賦值,然後再丟擲來就行了:

evtObj = document.createEventObject();
evtObj.keyCode=keyCode
el.fireEvent('on'+evtType, evtObj);

2. Firefox 需要通過document.createEvent建立KeyEvents物件,再通過initKeyEvent方法對事件物件初始化

evtObj = document.createEvent('KeyEvents');
evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );

3. Chrome/Safari/Opera

通過document.createEvent建立UIEvents物件,初始化後再在該物件上掛載按鍵值。

evtObj = document.createEvent('UIEvents'); 
evtObj.initUIEvent( evtType, true, true, window, 1 );

Chrome和Opera可以先將keyCode屬性delete掉後,再用Object.defineProperty方法重新為它賦值:

delete evtObj.keyCode;
Object.defineProperty(evtObj,"keyCode",{value:keyCode});

有些安卓瀏覽器,此法無效,需要用下面的方式:

Object.defineProperty(evtObj, 'keyCode', {
    get : function() { return this.keyCodeVal; }
});     
Object.defineProperty(evtObj, 'which', {
    get : function() { return this.keyCodeVal; }
});
evtObj.keyCodeVal = keyCode;

最後,封裝好的function大概就是這樣: 

function fireKeyEvent(el, evtType, keyCode){
	var doc = el.ownerDocument,
		win = doc.defaultView || doc.parentWindow,
		evtObj;
	if(doc.createEvent){
		if(win.KeyEvent) {
			evtObj = doc.createEvent('KeyEvents');
			evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
		}
		else {
			evtObj = doc.createEvent('UIEvents');
			Object.defineProperty(evtObj, 'keyCode', {
		        get : function() { return this.keyCodeVal; }
		    });     
		    Object.defineProperty(evtObj, 'which', {
		        get : function() { return this.keyCodeVal; }
		    });
			evtObj.initUIEvent( evtType, true, true, win, 1 );
			evtObj.keyCodeVal = keyCode;
			if (evtObj.keyCode !== keyCode) {
		        console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
		    }
		}
		el.dispatchEvent(evtObj);
	} 
	else if(doc.createEventObject){
		evtObj = doc.createEventObject();
		evtObj.keyCode = keyCode;
		el.fireEvent('on' + evtType, evtObj);
	}
}

使用方法: 假設模擬回車

fireKeyEvent(input元素, 'keydown', 13);

相關推薦

JavaScript 模擬鍵盤事件滑鼠事件比如模擬回車

最近程式碼中有個功能需要用到手動觸發鍵盤事件的功能。但鍵盤事件的fire在各瀏覽器下實現不一樣,下面分別說明: 1. IE下沒什麼問題,建立事件物件、對物件的keyCode屬性賦值,然後再丟擲來就行了: evtObj = document.createEven

Android---響應button事件,onDraw畫圖直線、三角形、矩形

最近面試的一些公司都在問有沒有學過繪圖,以前真沒怎麼接觸過。現學現賣下。。。 1.main.xml裡面的程式碼: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

loadrunner使用web_add_header新增HTTP資訊頭比如Content-Type,token使用

關於loadrunner使用web_add_header新增HTTP資訊頭(比如Content-Type,token等)和使用 1.web_add_header新增HTTP資訊頭(比如Content-Type,token等)   2.用web_custom_request

tensorflow圖片預處理測試效果resize,crop,pad

#%% 讀圖片程式碼 import matplotlib.pyplot as plt # plt 用於顯示圖片 import matplotlib.image as mpimg # mpimg 用於讀取圖片 import tensorflow as tf test_ima

ArcGIS標註技巧上標、

3. 在標註表示式中輸入: Round ([AREA], 0)& "m"& "<sup>" & "2" & "</sup>" 其中, Round ([欄位名], 小數位)& "字串"& "上標標示符" & "上標" &am

前端十五—— JavaScript事件:繫結事件方式、事件的冒泡預設事件滑鼠事件鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件

JS事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件 一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只

Selenium3+webdriver學習筆記5模擬常用鍵盤滑鼠事件

#!/usr/bin/env python# -*- coding:utf-8 -*-from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom selenium.webdriver.common.acti

cocos2d-x 鍵盤滑鼠事件

出了選單可以響應使用者事件外,cocos2d中的層(Layer)也可以響應事件。層能夠自動響應視窗事件,這些事件主要是鍵盤和滑鼠事件,cocos2d中事件處理是通過Pyglet的事件處理完成的。 1.鍵盤事件   層中的鍵盤事件主要有兩個on_key_press和on_key_release,當這些事件觸

frameset 將截斷鍵盤滑鼠事件的問題解決辦法

   最近發現一個網頁程式的Bug, 我的 主頁面引用了一個 IFrame, 而IFrame裡面有 Frameset 的兩個Frame. 主頁面是有滾動條的, 但是在 FrameSet 的 frame獲得焦點時, 無法將鍵盤(上,下鍵)或者滑鼠中鍵訊息傳遞給 主頁面, 導致無

vc++如何響應鍵盤滑鼠事件

鍵盤常用ASCII碼 ESC鍵 VK_ESCAPE (27)回車鍵: VK_RETURN (13)TAB鍵: VK_TAB (9)Caps Lock鍵: VK_CAPITAL (20)Shift鍵: VK_SHIFT ($10)Ctrl鍵: VK_CONTROL (17)Alt鍵: VK_MENU (18)空

自動化測試程式之二模擬觸控式螢幕點選事件滑動事件C語言

一、測試程式編寫說明 終端裝置上執行的是LINUX+QT應用程式,使用觸控式螢幕進行人機互動。經過測試人員長時間的人機互動測試,來確認系統的功能是否滿足需求後。現在需要編寫一個自動化的測試程式模擬觸控式螢幕點選事件和滑動,並能夠按照測試人員預設的指令碼執行,

javascript, jQuery阻止默認事件冒泡事件

itl 節點 func ret turn bsp opp var prevent 事件冒泡(event bubbling)   事件冒泡是指一個元素上的事件被觸發,然後這個事件按嵌套順序在父級元素上觸發,直至document根節點。   例如: <!DOCT

javascript, jQuery阻止預設事件冒泡事件

事件冒泡(event bubbling) 事件冒泡是指一個元素上的事件被觸發,然後這個事件按巢狀順序在父級元素上觸發,直至document根節點。   例如:     <!DOCTYPE html>     <html>     <head>       <titl

EventTrigger滑鼠事件介面

EventTrigger將滑鼠事件進行了一層封裝,只要重寫EventTrigger裡面的對應的虛擬函式,就能實現滑鼠對應的方法。 ~ public class UIeventTrigger : EventTrigger { public ove

javascript--BOM的onload事件onunload事件

1.onload事件 onload,頁面載入後執行,所謂頁面載入完成,指頁面上所有的元素建立完畢,引用的所有的外部資源(js、css、圖片)等下載完畢。 所以onload執行的比較晚,因為如果頁面上有好多好多圖片,它需要等這些圖片完成下載後才能執行。而寫在body後的< script ><

滑鼠事件滾輪事件例項

下面是滑鼠和滾輪的一些基本的例項僅供參考,不足請大家多多指教: package demo; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.eve

面試題-冒泡與捕獲、事件委託、ie事件dom模型事件滑鼠事件

    一直沒有搞懂jquery中的事件是怎麼新增事件處理程式的。原來就是用了事件委託,關鍵就是通過冒泡方式實現在最高層(document)處理事件,通過判斷事件target的id,給以不同的handler。當然也可以通過事件捕獲來處理,但是因為ie中只有冒泡,所以還是用

Android 鍵盤彈起回落事件監聽

轉載請註明出處 http://blog.csdn.net/u014513456/article/details/54343765 Author:[email protected] 背景 在京東金融APP的登陸頁面鍵盤彈出後

WPF 之路由事件附加事件

# 一、訊息驅動與直接事件模型 ​ 事件的前身是訊息(Message)。Windows 是訊息驅動的系統,執行其上的程式也遵循這個原則。訊息的本質就是一條資料,這條訊息裡面包含著訊息的類別,必要的時候還記載著一些訊息引數。例如:當你在按下滑鼠左鍵時,一條名為 WM_LBUTTONDOWN 的訊息

Pygame鍵盤輸入滑鼠操作

''' ================Pygame模擬鍵盤輸入和滑鼠操作---------------------------------------- 姓名 : 昔年 時間 : 2018/10/9 ''' import sys ##初始化 pygame.init() ##變數存放處