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

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

原代码:

//开始事件
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

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

你可能感兴趣的:(uni-app,前端框架,javascript,jquery)