此外掛能幹什麼？
一句話概括：通過程式主動觸發移動端滑動、拖拽、觸碰等操作
外掛有什麼用呢？
可以用於爬蟲，也可以用於自動化測試以及程式演示
複製程式碼外掛演示地址 （從網上扒了一個canvas繪圖的demo，引入touchRobot,通過程式繪圖）
注意，請在手機模式檢視所有演示地址，外掛僅支援移動端
拿常見的滑動相關demo舉例,程式觸發動端滑動
jQuery-slide滑塊驗證碼
操作步驟
step1
將程式碼在控制檯貼上執行
step2
var robot = new touchRobot(document.querySelector('#btn'));
robot.touchTo(0,0,400,0);
複製程式碼swiper輪播
操作步驟
step1
將程式碼在控制檯貼上執行
step2
var robot = new touchRobot(document.querySelector('.swiper-container'))
robot.touchLeft()
複製程式碼如何使用？
外掛支援指令碼嵌入，也支援npm安裝
指令碼嵌入
!function(t){var e={};function o(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=t,o.c=e,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(i,n,function(e){return t[e]}.bind(null,n));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){var i;!function(n,h){"use strict";var r={sign:["118.7734375 88.3515625","122.46875 84.65234375","125.6484375 81.46875","128.23828125 79.421875","131.875 76.84375","135.1640625 74.83984375","137.7265625 73.42578125","139.2578125 72.765625","140.5625 72.5625","141.375 72.5625","141.95703125 72.5625","142.34375 72.71484375","142.8671875 73.23828125","143.4375 74.1875","143.83984375 75.4921875","144.05859375 77.1328125","144.27734375 78.7734375","144.27734375 80.078125","144.37109375 81.12109375","144.71875 81.81640625","145.1328125 82.23046875","145.828125 82.4921875","146.98828125 82.4921875","148.29296875 82.1875","151.20703125 81.2578125","154.640625 79.82421875","158.51171875 78.03515625","161.29296875 76.70703125","166.3515625 74.00390625","170.66015625 72","173.65625 70.6328125","176.34765625 69.734375","177.27734375 69.640625","177.3515625 69.640625","177.42578125 69.94921875","177.42578125 71.921875","177.42578125 75.19140625","177.29296875 78.23828125","177.29296875 82.18359375","177.29296875 86.12890625","177.29296875 88.6015625","177.29296875 91.2421875","177.29296875 93.21484375","177.38671875 94.2578125","177.38671875 94.83984375","177.4609375 94.9921875","177.53515625 94.9921875","177.765625 94.8359375","178.6015625 94.27734375","180.54296875 92.9375","183.4765625 90.9765625","186.06640625 88.79296875","189.76171875 85.86328125","193.71484375 82.0703125","196.54296875 78.94140625","200.29296875 75.65625","203.625 72.625","205.94140625 70.16796875","207.0703125 68.6953125","207.625 67.94921875","207.85546875 67.79296875","208.0078125 67.79296875","208.16015625 67.79296875","208.91796875 68.55078125","209.79296875 69.97265625","210.76171875 72.15625","211.59375 74.17578125","212.22265625 75.54296875","213.01171875 77.234375","214.02734375 78.8125","215.01171875 80.234375","215.6875 81.19921875","216.4921875 82.3046875","217.6484375 83.25","219.2265625 84.265625","222.140625 85.19140625","225.41015625 85.87109375","227.71484375 86.11328125","230.1875 86.11328125","231.9921875 85.66015625","234.5078125 84.52734375","238.3046875 83.2109375","246.12109375 80.08203125","255.6640625 76.6875","261.0625 74.66015625","264.859375 73.1953125","266.55078125 72.515625","267.1328125 72.265625","267.44140625 72.109375","267.59375 72.109375","267.59375 71.953125","267.74609375 72.10546875"],right:["111.421875 357.66796875","119.23046875 356.52734375","133.68359375 354.53515625","151.03125 352.40234375","167.1171875 351.3671875","187.62890625 349.63671875","204.53125 349.109375","230.375 348.15234375","253.5234375 347.546875","267.16015625 347.3046875","284.0625 347.3046875","294.84375 347.3046875","308.07421875 347.3046875","315.2890625 347.3046875","322.2109375 347.125","325.03125 347.125","327.00390625 347.125","328.1640625 347.125","329.20703125 347.125"],left:["265.984375 432.171875","259.65234375 431.46875","248.8671875 430.1484375","237.671875 428.80859375","216.62890625 426.765625","200.1328125 425.71875","175.3984375 424.15625","150.6640625 421.65234375","135.796875 419.890625","117.390625 417.6953125","107.828125 416.8671875","97.85546875 416.4453125","93.00390625 416.2890625","87.85546875 416.2890625","85.03125 416.2890625","82.38671875 416.2890625"],top:["236.35546875 477.328125","238.89453125 469.31640625","241.078125 462.578125","246.55859375 449.12109375","253.87109375 432.59765625","259.8515625 419.390625","270.80859375 397.1640625","284.19140625 373.3359375","299.01171875 348.41015625","311.41796875 330.68359375","329.78125 305.734375","344.3046875 284.89453125","353.30078125 272.04296875","363.17578125 257.62890625","371.234375 245.03515625","375.234375 238.1796875","379.40625 230.4296875","381.59375 226.05078125","382.359375 224.51953125","382.63671875 223.58984375","382.63671875 223.359375","382.63671875 223.28515625"],bottom:["114.1328125 389.38671875","115.85546875 395.25","117.515625 404.8125","119.15234375 417.23046875","120.03125 428.015625","120.5390625 443.2890625","120.5390625 459.78515625","121.0546875 475.875","121.0546875 487.88671875","121.0546875 501.52734375","120.33984375 514.3515625","119.95703125 522.1640625","119.19140625 529.9765625","118.70703125 535.125","118.578125 537.94921875","118.2109375 540.2578125","118.015625 541.421875","118.015625 542.0078125","118.015625 542.2421875","118.015625 542.3984375","117.9375 542.3984375","117.9375 542.4765625"]};function u(t,e,o,i,n,h,r){n=(o-t)/30,h=(i-e)/30;for(var u=[],c=0;c<30;c++){var s=t+n*c;"horizontal"==r&&(s+=n*c/2);var l=e+h*c;"vertical"==r&&(l+=h*c/2),u.push(s+" "+l)}return u}function c(t,e){return Math.floor(Math.random()*(e-t+1)+t)}function s(t){this.touchEle=t}s.prototype._getPos=function(t){var e=this.touchEle.getBoundingClientRect(),o=[];if("left"==t){var i=100,n=200,h=c(e.x+e.width/2,e.x+e.width),s=c(e.y+e.height/5,e.y+e.height-e.height/5),l=c(e.x,e.x+e.width/2),g=c(s-50,s+50);Math.abs(g-s)>i&&(g=s+c(-50,50)),Math.abs(l-h)<n&&(l=h-n),o=u(h,s,l,g,"horizontal")}else if("right"==t){i=100,n=100,h=c(e.x,e.x+e.width/2),s=c(e.y+e.height/5,e.y+e.height-e.height/5),l=c(e.x+e.width/2,e.x+e.width),g=c(s-50,s+50);Math.abs(g-s)>i&&(g=s+c(-50,50)),Math.abs(l-h)<n&&(l=h+n),o=u(h,s,l,g,"horizontal")}else if("top"==t){var a=100,p=100;h=c(e.x,e.x+e.width),s=c(e.y+e.height/2,e.y+e.height-e.height/5),l=c(e.x,e.x+e.width),g=c(e.y,e.y+e.height/2);Math.abs(l-h)>a&&(l=h+c(-50,50)),Math.abs(g-s)<p&&(g=s-p),o=u(h,s,l,g,"vertical")}else if("bottom"==t){a=100,p=100,h=c(e.x,e.x+e.width),s=c(e.y+e.height/5,e.y+e.height/2),l=c(e.x,e.x+e.width),g=c(e.y+e.height/2,e.y+e.height-e.height/5);Math.abs(l-h)>a&&(l=h+c(-50,50)),Math.abs(g-s)<p&&(g=s+p),o=u(h,s,l,g,"vertical")}else o=r[t]||[];return o},s.prototype._touchMoveTo=function(t,e,o){var i=t[e].split(" ")[0],n=t[e].split(" ")[1];this._triggerTouchEvent("touchmove",i,n);var h=this;e<t.length-1?setTimeout(function(){h._touchMoveTo(t,++e,o)},24+e):o&&o()},s.prototype._triggerTouchEvent=function(t,e,o){var i=this.touchEle.getBoundingClientRect(),n=(c(),e||c(i.left,i.left+i.width)),h=o||c(i.top,i.top+i.height),r=new Touch({identifier:Date.now(),target:this.touchEle,clientX:n,clientY:h,pageY:h,pageX:n,radiusX:2.5,radiusY:2.5,rotationAngle:10,force:.5}),u=document.createEvent("UIEvent");u.initEvent(t,!0,!0),u.touches=[r],u.targetTouches=[r],u.changedTouches=[r],this.touchEle.dispatchEvent(u)},s.prototype._mouseMoveTo=function(t,e,o){var i=t[e].split(" ")[0],n=t[e].split(" ")[1];this._triggerMouseEvent("touchmove",i,n);var h=this;e<t.length-1?setTimeout(function(){h._mouseMoveTo(t,++e,o)},20):o&&o()},s.prototype._triggerMouseEvent=function(t,e,o){var i=this.touchEle.getBoundingClientRect(),n=(c(),e||c(i.left,i.left+i.width)),h=o||c(i.top,i.top+i.height),r=new MouseEvent({view:window,bubbles:!0,cancelable:!0,clientX:n,clientY:h});this.touchEle.dispatchEvent(r)},s.prototype.mouse=function(t){var e=r[t]||[],o=e[0].split(" ")[0],i=e[0].split(" ")[1];this._triggerMouseEvent("mouseend",o,i),this._mouseMoveTo(e,0,function(){var t=e[e.length-1].split(" ")[0],o=e[e.length-1].split(" ")[1];this._triggerMouseEvent("mouseend",t,o)})},s.prototype._touch=function(t){var e=this._getPos(t)||[],o=e[0].split(" ")[0],i=e[0].split(" ")[1];this._triggerTouchEvent("touchstart",o,i);var n=this;this._touchMoveTo(e,0,function(){var t=e[e.length-1].split(" ")[0],o=e[e.length-1].split(" ")[1];n._triggerTouchEvent("touchend",t,o)})},s.prototype.touchLeft=function(){return this._touch("left")},s.prototype.touchTop=function(){return this._touch("top")},s.prototype.touchRight=function(){return this._touch("right")},s.prototype.touchBottom=function(){return this._touch("bottom")},s.prototype.touchTo=function(t,e,o,i){var n=u(t,e,o,i,"horizontal"),h=n[0].split(" ")[0],r=n[0].split(" ")[1];this._triggerTouchEvent("touchstart",h,r);var c=this;this._touchMoveTo(n,0,function(){var t=n[n.length-1].split(" ")[0],e=n[n.length-1].split(" ")[1];c._triggerTouchEvent("touchend",t,e)})},s.prototype.mouseTo=function(t,e,o,i){var n=u(t,e,o,i,"horizontal"),h=n[0].split(" ")[0],r=n[0].split(" ")[1];this._triggerMouseEvent("mouseend",h,r);var c=this;this._mouseMoveTo(n,0,function(){var t=n[n.length-1].split(" ")[0],e=n[n.length-1].split(" ")[1];c._triggerMouseEvent("mouseup",t,e)})},s.prototype.touchClick=function(){var t=this.touchEle.getBoundingClientRect(),e=t.x+c(t.width/3,t.width-t.width/3),o=t.y+c(t.height/3,t.height-t.height/3);this._triggerTouchEvent("touchstart",e,o);var i=this;setTimeout(function(){i._triggerTouchEvent("touchend",e,o),i.touchEle.click()},250)},s.prototype.mouseClick=function(){var t=this.touchEle.getBoundingClientRect(),e=t.x+c(t.width/3,t.width-t.width/3),o=t.y+c(t.height/3,t.height-t.height/3);this._triggerMouseEvent("mouseend",e,o);var i=this;setTimeout(function(){i._triggerMouseEvent("mouseup",e,o),i.touchEle.click()},250)},t.exports&&(t.exports=s),void 0===(i=function(){return s}.call(e,o,e,t))||(t.exports=i),n.touchRobot=s}(window,document)}]);
複製程式碼將以上程式碼放入你的網頁中即可
npm方式安裝
npm install touch-robot
在程式碼中引入外掛
import touchRobot from 'touch-robot'
使用
var robot = new touchRobot(dom);
robot.touchLeft();
複製程式碼外掛API
| 方法（method） | 描述（description） |
|---|---|
| touchLeft | 左滑 |
| touchRight | 右滑 |
| touchTop | 上滑 |
| touchBottom | 下滑 |
| touchTo | 定點滑動，引數startX,startY,endX,endY |
| touchClick | 觸碰點選 |
| touch | 按照給定路徑座標滑動，引數['x1 y1', 'x2 y2', 'x3 y3'] |
上面介紹了使用方式和API，下面介紹一下實現方式
先賣個關子，你知道有幾種方式可以通過程式觸發下面button的click事件嗎？
<button id="main">按鈕</button>
var btn = document.getElementById('main');
btn.addEventListener('click', function(){
alert('click me')
}, false);
btn.addEventListener('touchstart', function(){
alert('touch me')
}, false);
複製程式碼估計多數想到的是這樣觸發
document.getElementById('main').click()
那你還知道其它方式觸發button的click事件嗎？
what?
var event = document.createEvent('Event');
event.initEvent('click', true, true);
btn.dispatchEvent(event);
複製程式碼上面這種方式同樣可以觸發click
touch事件怎麼主動觸發呢？
touch事件比較複雜，不能像click那種直接觸發，實現方式相對曲折一點
var x = 100;
var y = 200;
var touch = new Touch({
identifier: Date.now(),
target: this.touchEle,
clientX: x,
clientY: y,
pageY: y,
pageX: x,
radiusX: 2.5,
radiusY: 2.5,
rotationAngle: 10,
force: 0.5
});
// 構建TouchEvent
var touchEvent = new TouchEvent('touchstart', {
cancelable: true,
bubbles: true,
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
});
btn.dispatchEvent(touchEvent);
複製程式碼