背景
是這樣子滴，有時候我們用vue框架的時候，要用到很多手勢，像tap、doubletap、longtap……，當然現在網上有很多手勢褲什麼的，拿來改一下也是可以實現自己想要的效果滴，我是希望用vue 的時候類似於
<p @tap="aaa" @longtap="bbb">{{msg}}－－－長按（longtap）點擊（tap）事件</p>
這麼用那好了，左思右想寫了一個小栗子，用來拋磚引玉。
原理
首先要理解js的自定義事件。Events 可以使用 Event構造函數 創建如下:
// 事件對象
var event = new Event(‘build’);
// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);
// 分發事件
elem.dispatchEvent(event);
當然可以，添加自定義數據
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
好了，看了上面的原理之後直接上源碼，簡單封裝一個tap和longtap事件，
實現
先寫個打架都熟悉的vue的小代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
p{
background: #168dd2;
padding: 15px;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="tap.js"></script>
</head>
<body>
<div id="app">
<p @tap="aaa" @longtap="bbb">{{msg}}－－－長按（longtap）點擊（tap）事件</p>
<p @tap="aaa">{{msg}}－－－點擊（tap）事件</p>
<p @longtap="bbb">{{msg}}－－－長按（longtap）事件</p>
<p @touchstart="aaa">{{msg}}－－－touchstart事件</p>
<p>{{msg}}－－－沒有事件跟風用～～～</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
aaa: function(e) {
console.log(e);
},
bbb: function(e) {
console.log('loooongtap');
console.log(e);
}
}
})
</script>
</html>
上面引入了一個tap.js， 下面我們就去補全這個js就好了。
tap.js
(function() {
var TOUCHSTART, TOUCHMOVE, TOUCHEND;
if(typeof(window.ontouchstart) != 'undefined') {
TOUCHSTART = 'touchstart';
TOUCHEND = 'touchend';
TOUCHMOVE = 'touchmove';
} else if(typeof(window.onmspointerdown) != 'undefined') {
TOUCHSTART = 'MSPointerDown';
TOUCHEND = 'MSPointerUp';
TOUCHMOVE = 'MSPointerMove';
} else {
TOUCHSTART = 'mousedown';
TOUCHEND = 'mouseup';
TOUCHMOVE = 'mousemove';
}
function tap(node) {
var x, y, startTime = 0,
endTime = 0,
in_dis = false;
node.oncontextmenu = function() {
return false;
}
node.addEventListener(TOUCHSTART, function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
startTime = (new Date()).getTime();
});
node.addEventListener(TOUCHEND, function(e) {
e.stopPropagation();
e.preventDefault();
var curx = e.changedTouches[0].pageX;
var cury = e.changedTouches[0].pageY;
if(Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
in_dis = true;
} else {
in_dis = false;
}
endTime = (new Date()).getTime();
if(endTime - startTime > 300 && in_dis) {
e.target.dispatchEvent(new CustomEvent('longtap', {
'detail': e
}));
} else {
e.target.dispatchEvent(new CustomEvent('tap', {
'detail': e
}));
}
});
}
tap(document);
})();
也先不管了 直接掛載到document上面（人懶～～～～）。
這樣子就好了 直接預覽下效果，
能正常調用aaa(), bbb()，還行還行～～～！！！
醬紫之後會不會好一點？？？？，寫的不好～～～道友們輕噴～～～～