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

全栈程序员-站长 • 2022年6月19日下午2:36 • 未分类 • 阅读 176

大家好，又见面了，我是你们的朋友全栈君。

之前开发一个小游戏在手机和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

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150809.html原文链接：https://javaforall.net