1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 6 <title>自定义tap指令</title> 7 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <button v-tap="todo">按钮</button> 12 </div> 13 14 <script> 15 /*封装tap*/ 16 function tap(dom,callback){ 17 /* 18 * 要求 没有触发 touchmove 事件 19 * 并且响应速度要比click快 20 */ 21 if(dom && typeof dom == 'object'){ 22 var isMove = false; 23 var startTime = 0; 24 dom.addEventListener('touchstart',function(e){ 25 //console.log('touchstart'); 26 //console.time('tap');/*记录tap这个参数现在的时间*/ 27 startTime = Date.now(); 28 }); 29 dom.addEventListener('touchmove',function(e){ 30 //console.log('touchmove'); 31 isMove = true; 32 }); 33 dom.addEventListener('touchend',function(e){ 34 //console.log('touchend'); 35 //console.timeEnd('tap')/*打印tap这个参数距离上一次记录的时候的时间*/ 36 /*判读 是否满足tap 的要求 一般要求tap的响应时间150*/ 37 if(!isMove && (Date.now()-startTime) < 150){ 38 /*调用 callback*/ 39 // callback && callback(e); 40 callback.call(dom, e); 41 } 42 /*重置 参数*/ 43 isMove = false; 44 startTime = 0; 45 }); 46 } 47 } 48 Vue.directive('tap', { 49 bind: function (el, binding) { 50 tap(el, binding.value) 51 } 52 }) 53 new Vue({ 54 el: '#app', 55 methods: { 56 todo: function () { 57 console.log('todo'); 58 } 59 } 60 }) 61 </script> 62 </body> 63 </html>