android js 双指事件,移动端touch事件--点击、双指与拖拽

前言

用vue做移动端开发过程中，需要手势操作。因为vue-touch目前不支持vue2.0，所以自己写了几个手势。

实现功能

点击

双指缩放图片

移动

指令代码

myTouch.js >>

export default(Vue) => {

Vue.directive('touch', {

bind: function (el, binding, vnode) {

let type = binding.arg; // 传入点击的类型

let coordinate = {} // 记录坐标点的对象

let timeOutTap;

let timeOutLong;

let scaleSize; // 缩放尺寸

let displacement = {}; //移动的位移

// 勾股定理计算距离

function getDistance(bg, end){

return Math.sqrt(Math.pow((end.x - bg.x),2 ) + Math.pow((end.y - bg.y),2 ));

}

// 点击开始的时候

el.addEventListener('touchstart', function(e){

// 获取第一个手指点击的坐标

let x = e.touches[0].pageX;

let y = e.touches[0].pageY;

// 如果点击的时间很长，那么点击的类型就是长按 --- longTouch

timeOutLong = setTimeout(() => {

timeOutLong = 0;

if(type === 'longTouch'){

binding.value.func(binding.value.param)

}

}, 2000)

timeOutTap = setTimeout(() => {

timeOutTap = 0;

if(type === 'tap' && e.touches.length === 1){

binding.value.func(binding.value.param)

}

}, 200)

// 如果是两个手指，而且类型是缩放 --- scaleTocuh

if(e.touches.length > 1 && type === 's