雏形,未做优化,原理:自定义指令。
<!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 = 0, y = 0, z = 0, timer = null;
oDiv.addEventListener("touchstart",function(e) {
if(e.touches.length > 1) {
return false;
}
z = 0;
timer = setTimeout(function() {
z = 1;
}, 500);
x = e.touches[0].clientX;
y = e.touches[0].clientY;
e.preventDefault();
}, false);
document.addEventListener("touchmove", function(e) {
if(x != e.touches[0].clientX || y!= e.touches[0].clientY) {
clearTimeout(timer);
return false;
}
}, false);
document.addEventListener("touchend", function(ev) {
if(z != 1) {
clearTimeout(timer);
x = 0;
y = 0;
return false;
} else {
x = 0;
y = 0;
z= 0;
alert("长按了啊")
}
}, false);
})
window.onload = function() {
new Vue({
el: '#test',
data: {
timeOutEvent: 0
},
mounted() {
}
})
}
</script>
<style type="text/css">
#name{width:500px; height:500px; background: red;}
</style>
</head>
<body>
<div id="test">
<div id="name" v-longtouch="timeOutEvent"></div>
</div>
</body>
</html>