js监听手机浏览器左滑
时间: 2023-09-23 16:02:17 浏览: 43
你可以使用`touchstart`、`touchmove`和`touchend`事件来监听手机浏览器的左滑手势。具体实现如下:
```javascript
var startX, startY, moveEndX, moveEndY, X, Y;
document.addEventListener('touchstart', function(e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
}, false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X < 0) {
console.log('左滑事件');
}
}, false);
document.addEventListener('touchend', function(e) {
e.preventDefault();
}, false);
```
上述代码中,我们先在`touchstart`事件中记录开始触摸时的坐标,然后在`touchmove`事件中计算当前触摸点的坐标与开始触摸时的坐标之间的差值,并根据差值判断是否为左滑手势。最后,在`touchend`事件中防止浏览器默认行为的发生。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)