custom-touch-event
v1.0.0
Published
Custom Touch Events.
Downloads
2
Maintainers
Readme
触摸事件插件
调用方法:
node.addEventListener(event, handler) // 绑定事件
node.removeEventListener(event, handler) // 取消事件
event 可用的事件列表
tap // 轻触事件
longTap // 长按事件
swipe // 滑屏事件(持续触发)
swipeEnd // 滑屏结束事件
swipeLeft // 向左滑屏
swipeRight // 向右滑屏
swipeUp // 向上滑屏
swipeDown // 向下滑屏
e.data.points
target: HTMLElement, // 事件触发 DOM 节点
startStamp: 0, // 事件开始时间戳
endStamp: 0, // 事件结束时间戳
startApart: 0, // 两点触摸,开始触摸间距值
endApart: 0, // 两点触摸,结束触摸间距值
startAngle: 0, // 两点触摸,开始触摸角度值
endAngle: 0 // 两点触摸,结束触摸角度值
startX: {}, // Point对象,开始触摸 X 坐标点
startY: {}, // Point对象,开始触摸 Y 坐标点
endX: {}, // Point对象,结束触摸 X 坐标点
endY: {}, // Point对象,结束触摸 Y 坐标点
diffX: {}, // Point对象,触摸 X 坐标偏移量
diffY: {}, // Point对象,触摸 Y 坐标偏移量
Point 对象
length: 1 // 触摸点数量
keys: Function // 获取触摸点
使用Demo
document.body.addEventListener('swipe', e => {
console.log(e.data.points)
})
在vue中使用
<template>
<h2>scale and rotate image</h2>
<img class="image" src="image/img.jpg" @touchstart="handler" @swipe="handler" />
</template>
<script setup>
let scaleFlag = 1
let rotateFlag = 0
let scale = 1
let rotate = 0
const handler = e => {
if (e.type === 'touchstart') {
rotateFlag = rotate
scaleFlag = scale
} else if (e.type === 'swipe') {
const points = e.data.points
const pointLen = points.endX.length
if (pointLen > 1) {
const diff = points.endApart - points.startApart
if (diff > 0) {
scale = scaleFlag + diff / 100
} else if (diff < 0) {
scale = scaleFlag - Math.abs(diff) / 100
}
if (scale < 0.2) {
scale = 0.2
}
rotate = (rotateFlag + points.startAngle - points.endAngle) % 360
img.style.transform = `scale(${scale}) rotate(${rotate}deg)`
}
}
}
</script>