JavaScript 模拟键盘事件和鼠标事件

JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)
标签: javascript鼠标键盘事件模拟
2016-09-08 15:23 5189人阅读 评论(6) 收藏 举报
分类: 其它(5)
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52471878

最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样,下面分别说明:

1. IE下没什么问题,创建事件对象、对对象的keyCode属性赋值,然后再抛出来就行了:
[js] view plain copy
evtObj = document.createEventObject();
evtObj.keyCode=keyCode
el.fireEvent(‘on’+evtType, evtObj);

2. Firefox 需要通过document.createEvent创建KeyEvents对象,再通过initKeyEvent方法对事件对象初始化
[js] view plain copy
evtObj = document.createEvent(‘KeyEvents’);
evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );
initKeyEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent

3. Chrome/Safari/Opera
通过document.createEvent创建UIEvents对象,初始化后再在该对象上挂载按键值。
[js] view plain copy
evtObj = document.createEvent(‘UIEvents’);
evtObj.initUIEvent( evtType, true, true, window, 1 );
initUIEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

Chrome和Opera可以先将keyCode属性delete掉后,再用Object.defineProperty方法重新为它赋值:
[js] view plain copy
delete evtObj.keyCode;
Object.defineProperty(evtObj,”keyCode”,{value:keyCode});

有些安卓浏览器,此法无效,需要用下面的方式:
[js] view plain copy
Object.defineProperty(evtObj, ‘keyCode’, {
get : function() { return this.keyCodeVal; }
});
Object.defineProperty(evtObj, ‘which’, {
get : function() { return this.keyCodeVal; }
});
evtObj.keyCodeVal = keyCode;

最后,封装好的function大概就是这样:
[js] view plain copy
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);
}
}

使用方法: 假设模拟回车
[js] view plain copy
fireKeyEvent(input元素, ‘keydown’, 13);