文章详情
html页面监听左滑右滑事件
Posted on 2020-01-18 03:05:33 by 主打一个C++
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右滑动事件测试</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="myDiv">滑动我</div>
<script>
class SwipeListener {
constructor(element) {
this.element = element;
this.touchStartX = 0;
this.threshold = 50; // 滑动距离阈值，单位为像素
// 绑定触摸事件
this.element.addEventListener('touchstart', this.handleTouchStart.bind(this), false);
this.element.addEventListener('touchend', this.handleTouchEnd.bind(this), false);
}
handleTouchStart(event) {
// 获取触摸开始时的X坐标
this.touchStartX = event.touches[0].clientX;
}
handleTouchEnd(event) {
// 获取触摸结束时的X坐标
const touchEndX = event.changedTouches[0].clientX;
const dx = this.touchStartX - touchEndX;
// 判断滑动方向
if (Math.abs(dx) > this.threshold) {
if (dx > 0) {
this.element.dispatchEvent(new Event('swipeleft'));
} else {
this.element.dispatchEvent(new Event('swiperight'));
// 阻止向右滑动返回
event.preventDefault();
return false;
}
}
}
}
// // 使用示例
const myDiv = document.getElementById('myDiv');
const swipeListener = new SwipeListener(myDiv);
myDiv.addEventListener('swipeleft', function() {
console.log('向左滑动');
myDiv.style.backgroundColor = 'lightcoral'; // 改变背景颜色以示响应测试
});
myDiv.addEventListener('swiperight', function() {
console.log('向右滑动');
myDiv.style.backgroundColor = 'lightgreen'; // 改变背景颜色以示响应测试
});
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
e.preventDefault();
}
},{passive:false});
</script>
</body>
</html>
*转载请注明出处：原文链接：https://cpp.vin/page/136.html
