uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替

之前开发一个小游戏在手机和ipad上都可以正常使用，后期需要扩展h5业务，发现uni-app中touch事件失效了，使用jquery相关事件代替实现了。

原代码：

<button type="default" class="btn" :style="'transform: translateX('+Distance+'px)'" @touchstart="touchtStarEvent" @touchmove="touchMoveEvent" @touchend="touchEndEvent">滑动按钮
</button>

//开始事件
touchtStarEvent(e){this.ClientX = e.changedTouches[0]['clientX'];this.isMove = false;
},
//移动事件
touchMoveEvent(e){let _dir = e.changedTouches[0]['clientX']-this.ClientX;    if(_dir<0&&_dir>-50){this.isMove = true;this.Distance = _dir;}
},
//结束事件
touchEndEvent(e){if(this.isMove){this.Distance = 0;this.isMove = false;}
},

引用jquery插件

// #ifdef H5
import jQuery from '@/utils/jquery-3.5.1.min.js'
// #endif

jQuery下载地址：点击下载

由于在h5中，touch事件无触发，这里通过jquery的mousedown、mousemove、mouseup、mouseout代替实现touchstart、touchmove、touchend事件。获取鼠标的移动参数后，转成原touch事件所需要的changedTouches数据，这样直接触发原事件即可。

// #ifdef H5
var _isDown = false, that = this;//开始事件
jQuery(document).on('mousedown', '.btn', function(e){if(!_isDown) _isDown = true;that.touchtStarEvent({changedTouches: [{"clientX": e.pageX, "clientY": e.pageY}]});
});
//移动事件
jQuery(document).on('mousemove', '.btn', function(e){if(_isDown){that.touchMoveEvent({changedTouches: [{"clientX": e.pageX, "clientY": e.pageY}]});}
});
//结束事件
jQuery(document).on('mouseup', '.btn', function(e){if(_isDown) _isDown = false;that.touchEndEvent({changedTouches: [{"clientX": e.pageX, "clientY": e.pageY}]});
});
//结束事件
jQuery(document).on('mouseout', '.btn', function(e){if(_isDown) _isDown = false;that.touchEndEvent({changedTouches: [{"clientX": e.pageX, "clientY": e.pageY}]});
});
// #endif

以上是个人项目中移动物体示例，仅供参考。

uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替相关推荐

触摸事件中touchstart、touchmove、touchend、touchcancel事件应用方法及实例
触摸事件中touchstar.touchmove.touchend.touchcancel事件应用方法及实例一. 分享到: 前面我们介绍过移动设备中一些设备事件,例如手机旋转90度.倾斜等设置放置姿 ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
Vue中使用touchstart、touchmove、touchend与click冲突
今天做项目,突然发现了这个问题.就是在移动端,一个元素既注册有滑动事件,又注册有点击事件时就会出现一些问题. 比如我就不知道滑动事件的优先级是大于点击事件的,而当我们只想执行点击事件而不想触发滑动时间 ...
移动端开发touchstart，touchmove，touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目最近在做移动端的开发,在一个"服务商管理"页面使用到了触摸事件"touchstart& ...
javaScript -- touch事件详解（touchstart、touchmove和touchend）
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
关于移动端的touch事件（touchstart， touchmove， touchend，touchcancel）
移动端的touch事件四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchc ...
移动端的触屏四个方法：touchstart，touchmove，touchend，touchcancel
移动端新增了4个与手指触摸相关的事件 touchstart:手指触摸手机屏幕时触发 touchmove:手指在手机屏幕移动时触发 touchend:手指离开手机屏幕时触发 touchcancel:系统 ...
用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】
touchstart事件:当一开始触摸时所获取触发的[就算不滑动也会触发] touchend事件:当离开触摸屏时所触发的事件 touchmove事件:当你触摸时滑动时连续发生的事件刚开始触碰,目的要 ...
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
触摸事件中touchstar.touchmove.touchend.touchcancel事件应用方法及实例一. 分享到: 前面我们介绍过移动设备中一些设备事件,例如手机旋转90度.倾斜等设置放置姿 ...

uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替

uniapp中touchstart、touchmove和touchend在H5中无法触发，可通过jQuery添相应事件代替相关推荐

最新文章

热门文章