雛形，未做優化，原理：自定義指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yuki-長按事件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="vue-resource.js"></script>
<script type="text/javascript">
Vue.directive("longtouch", function(el, binding) {
var oDiv = el,
value = binding.value,
x = , y = , z = , timer = null;
oDiv.addEventListener("touchstart",function(e) {
if(e.touches.length > ) {
return false;
}
z = ;
timer = setTimeout(function() {
z = ;
}, );
x = e.touches[].clientX;
y = e.touches[].clientY;
e.preventDefault();
}, false);
document.addEventListener("touchmove", function(e) {
if(x != e.touches[].clientX || y!= e.touches[].clientY) {
clearTimeout(timer);
return false;
}
}, false);
document.addEventListener("touchend", function(ev) {
if(z != ) {
clearTimeout(timer);
x = ;
y = ;
return false;
} else {
x = ;
y = ;
z= ;
alert("長按了啊")
}
}, false);
})
window.onload = function() {
new Vue({
el: '#test',
data: {
timeOutEvent:
},
mounted() {
}
})
}
</script>
<style type="text/css">
#name{width:px; height:px; background: red;}
</style>
</head>
<body>
<div id="test">
<div id="name" v-longtouch="timeOutEvent"></div>
</div>
</body>
</html>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)