JS 移动端监听到手指滑动
时间: 2023-09-02 17:07:14 浏览: 49
在 JavaScript 中,可以通过监听 touchstart、touchmove 和 touchend 事件来实现对手指滑动的监听。具体实现步骤如下:
1. 使用 addEventListener() 方法为需要监听的元素绑定 touchstart、touchmove 和 touchend 事件的监听器。
2. 在 touchstart 事件的回调函数中,获取手指触碰屏幕的坐标(event.touches[0].clientX 和 event.touches[0].clientY),并记录下来。
3. 在 touchmove 事件的回调函数中,获取手指移动时的坐标(event.touches[0].clientX 和 event.touches[0].clientY),并计算出手指移动的距离(当前坐标减去 touchstart 事件中记录的坐标)。
4. 在 touchend 事件的回调函数中,清空记录的坐标信息。
具体实现代码如下:
```
var startX, startY;
// 绑定 touchstart 事件
element.addEventListener('touchstart', function(event) {
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
}, false);
// 绑定 touchmove 事件
element.addEventListener('touchmove', function(event) {
var moveX = event.touches[0].clientX - startX;
var moveY = event.touches[0].clientY - startY;
// 根据手指移动的距离来执行相应的操作
// ...
}, false);
// 绑定 touchend 事件
element.addEventListener('touchend', function(event) {
startX = null;
startY = null;
}, false);
```
需要注意的是,移动端的触控事件和 PC 端的鼠标事件有所不同,需要在编写代码时注意区分。