JavaScript实现按键精灵的原理分析

最近有个需求，需要在页面上面自动点击、输入、提交。

用以模拟真实用户的操作行为，可以通过直接执行某个元素绑定的事件，来执行操作。

也可以创建事件，再派发事件，执行操作。关于事件的更多细节，可以参考《JavaScript中事件处理》

1、模拟MouseEvent中的click事件，x与y位置随机点击

2、模拟TouchEvent中的touchstart和touchmove，用scroll来做滑动效果

3、模拟FocusEvent，聚焦到屏幕中的输入框内

一、鼠标事件MouseEvent

MouseEvent接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

MouseEvent派生自 UIEvent，UIEvent 派生自 Event。

rush:js;"> function random(max) { return Math.floor(Math.random() * max); } function on(dom,type,fn) { dom.addEventListener(type,fn,false); } on(document.body,'click',function(e) { console.log('click事件 x:'+e.clientX,'y:'+e.clientY); }); /** * MouseEvent * 包括事件 click，dblclick，mouseup，mousedown */ function mouse() { var x = random(window.outerWidth),y = random(window.outerHeight); var event = new MouseEvent('click',{ bubbles: true,cancelable: true,view: window,clientX: x,clientY: y }); console.log('click环境 x:'+x,'y:'+y); document.body.dispatchEvent(event); } mouse();

1）Event

语法如下：

typeArg：事件的名字，DOMString类型。

eventinit：

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; color: rgb(0,0); font: 14px/22px verdana; border-left: silver 1px solid; widows: 1; letter-spacing: normal; text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

默认

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">copedottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

是指在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。

2）UIEvent

语法如下：

有多个事件对象直接或间接的继承了UIEvent，包括：MouseEvent,TouchEvent,FocusEvent,KeyboardEvent,WheelEvent,InputEvent和CompositionEvent。

UIEventInit：

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

3）MouseEvent

语法如下：

mouseEventinit：

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; color: rgb(0,0); font: 14px/22px verdana; border-left: silver 1px solid; widows: 1; letter-spacing: normal; text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

默认

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

用户屏幕screen的水平/垂直坐标位置；

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">MetaKeyottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">Meta键ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">relatedTargetottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

SEOver);

SEOut 或 mouseleave)。

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

二、触屏事件TouchEvent

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。

每个Touch对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标元素描述。TouchList对象代表多个触点的一个列表。

触屏touch事件的更多细节，可以参加《触屏touch事件记录》

rush:js;"> on(document.body,'touchstart',function(e) { var touch = e.touches.item(0); console.log('touchstart x:' + touch.clientX,'y:' + touch.clientY); }); on(document.body,'touchmove',function(e) { var touch = e.touches.item(0); console.log('touchmove x:' + touch.clientX,'touchend',function(e) { var touch = e.changedtouches.item(0); console.log('touchend x:' + touch.clientX,'y:' + touch.clientY); }); on(window,'scroll',function(e) { console.log('scroll timestamp:' + e.timeStamp); }); /** * TouchEvent * 包括事件 touchstart，touchend，touchmove，touchcancel */ function touchstart(x,y,number) { var touch = new Touch({ identifier: number,target: document.querySelector('.drag'),//随便设置的 clientX: x,clientY: y }); console.log('touchstart环境 x:' + x,'y:' + y); var event = new TouchEvent('touchstart',{ touches: [touch],targettouches: [touch],changedtouches: [touch] }); document.body.dispatchEvent(event); //touchstart } function touchmove(x,interval,clientY: y + interval }); var event = new TouchEvent('touchmove',changedtouches: [touch] }); document.body.dispatchEvent(event); //touchmove } function touch() { var x = random(window.outerWidth),y = random(window.outerHeight),number = 1,interval = 10; touchstart(x,number); number++; touchmove(x,number); number++; interval += 10; touchmove(x,number); document.body.scrollTop = interval; //自动滚动 } setTimeout(function() { touch(); },2000);

1）Touch

语法如下：

touchInit：

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; color: rgb(0,0); font: 14px/22px verdana; border-left: silver 1px solid; widows: 1; letter-spacing: normal; text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

默认

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">一个触摸点的数字标记，唯一标识符。ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">用户对可见视区的缩放行为而发生变化。ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性不同，不会受到initial-scale的影响；

自带的浏览器不会被影响。

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">属性不同，这个值是相对于整个html文档的坐标，这个值包含了垂直滚动的偏移。ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">用户和触摸平面的接触面的最小椭圆的水平轴(X轴)/垂直轴(Y轴)半径。ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

用户和触摸平面的接触面的角度。

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

2）TouchEvent

语法如下：

touchEventinit：

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; color: rgb(0,0); font: 14px/22px verdana; border-left: silver 1px solid; widows: 1; letter-spacing: normal; text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

默认

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">touchesottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">touchesottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">touches类似，但是增加了个过滤条件，要与第一个手指点的地方（同一个节点内）相同。ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">touchesottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

增加的触点。如果同时放下一根或两根手指，那么将与touches相同，但如果先放一根，在放第二根，那就会不同。

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">MetaKeyottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">Meta键

三、焦点事件FocusEvent

FocusEvent接口表示和焦点相关的事件比如 focus,blur,focusin,和 focusout。

rush:js;"> on(document.getElementById('txt'),'focus',function(e) { //console.log(e); console.log('focus timestamp:' + e.timeStamp); }); /** * FocusEvent * 包括事件 focus,focusout */ function focus() { var event = new FocusEvent('focus',{ view: window }); document.getElementById('txt').dispatchEvent(event); } focus();

1）FocusEvent

语法如下：

focusEventinit：

normal; word-spacing: 0px; text-transform: none; color: rgb(0,0); font: 14px/22px verdana; widows: 1; letter-spacing: normal; text-indent: 0px; -webkit-text-stroke-width: 0px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

属性

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">默认

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">relatedTarget

ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px">ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; border-left: silver 1px solid; padding-right: 3px"> 以上所述是小编给大家介绍的JavaScript实现按键精灵的原理分析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 上一篇：javascript 组合按键事件监听实现代下一篇：JavaScript中的this陷阱的最全收集 相关推荐 自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗 前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从 作者：huanzi-qch 时间：2024-09-25 nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在 作者：huanzi-qch 时间：2024-09-25 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现 前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参 作者：huanzi-qch 时间：2024-09-25 踹掉后端，前端导出Excel！ 前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E 作者：huanzi-qch 时间：2024-09-25 Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量 前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务 作者：huanzi-qch 时间：2024-09-25 select标签 禁止选择但又能通过序列化form表单传值到后台 前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled="disabled"时发现，无法序列化form获取到select标签的值；当我们使用readonly="readonly&quo 作者：huanzi-qch 时间：2024-09-25 还在问跨域？本文记录js跨域的多种实现实例 前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、 作者：huanzi-qch 时间：2024-09-25 formData批量上传的多种实现 前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD 作者：huanzi-qch 时间：2024-09-25 laypage 物理分页与逻辑分页实例 前言 以下介绍摘自 layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素 作者：huanzi-qch 时间：2024-09-25 乐观锁机制解决多层嵌套异步ajax问题 前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示 作者：huanzi-qch 时间：2024-09-25 小编推荐 苹果市值2025年有望达4万亿美元 • 微信青少年模式全新升级：视频号内容分 • 《地下城与勇士DNF》永久交通卡卡面上线 • 优酷为方便长辈看视频，上线银发剧场！ • 微信读书集成腾讯混元AI技术，可以一日 • 京东快递上线11项会员权益 • 高德地图功能升级，新增安全预警 • 小爱同学多模态能力升级，引领智能生活 热门标签更多 友情链接: ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！