console
document.addEventListener('DOMContentLoaded', () => {
const gestureArea = document.getElementById('gestureArea');
let startX = 0, startY = 0, endX = 0, endY = 0;
const gestureCallbacks = {
swipeLeft: () => alert('�� 向左滑动'),
swipeRight: () => alert('�� 向右滑动'),
swipeUp: () => alert('�� 向上滑动'),
swipeDown: () => alert('�� 向下滑动'),
};
const judgeLength = 30
function detectGesture() {
const deltaX = endX - startX;
const deltaY = endY - startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX > judgeLength) gestureCallbacks.swipeRight();
if (deltaX < -judgeLength) gestureCallbacks.swipeLeft();
} else {
if (deltaY > judgeLength) gestureCallbacks.swipeDown();
if (deltaY < -judgeLength) gestureCallbacks.swipeUp();
}
}
gestureArea.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
gestureArea.addEventListener('touchend', (e) => {
endX = e.changedTouches[0].clientX;
endY = e.changedTouches[0].clientY;
detectGesture();
});
gestureArea.addEventListener('mousedown', (e) => {
startX = e.clientX;
startY = e.clientY;
});
gestureArea.addEventListener('mouseup', (e) => {
endX = e.clientX;
endY = e.clientY;
detectGesture();
});
});
<div class="gesture-area" id="gestureArea">
在此区域滑动,检测手势方向
</div>
.gesture-area {
width: 300px;
height: 200px;
margin: 50px auto;
border: 2px dashed #42b983;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
user-select: none;
cursor: pointer;
}