大家好，又见面了，我是你们的朋友全栈君。
之前开发一个小游戏在手机和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'
// #endifjQuery下载地址：点击下载
由于在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以上是个人项目中移动物体示例，仅供参考。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150809.html原文链接：https://javaforall.net
