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

uniapp中touchstart、touchmove和touchend在H5中无法触发,可通过jQuery添相应事件代替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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150809.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 卷积神经网络概念与原理[通俗易懂]

    卷积神经网络概念与原理[通俗易懂]一、卷积神经网络的基本概念受Hubel和Wiesel对猫视觉皮层电生理研究启发,有人提出卷积神经网络(CNN),YannLecun最早将CNN用于手写数字识别并一直保持了其在该问题的霸主地位。近年来卷积神经网络在多个方向持续发力,在语音识别、人脸识别、通用物体识别、运动分析、自然语言处理甚至脑电波分析方面均有突破。卷积神经网络与普通神经网络的区别在于,卷

  • ip 淘宝地址库 好东西

    ip 淘宝地址库 好东西

    2021年10月17日
  • 利用键盘钩子捕捉linux键盘动作,利用键盘钩子捕获Windows键盘动作[通俗易懂]

    利用键盘钩子捕捉linux键盘动作,利用键盘钩子捕获Windows键盘动作[通俗易懂]下载本文示例代码引言  在科研生产中对研制、调试操作的记录是非常有必要而且是有很重要价值的。通过对记录信息的分析,可以在事故发生后准确的分析出事故的起因、操作是否存在失误等许多重要线索。通常需要记录的信息是多种多样的,如环境温度记录、软件运行记录、文件访问记录等等。这里将以键盘信息记录为例来讲述类似的实验信息自动记录的一般实现方法。  由于需要记录当前系统下所有应用程序的键盘录入记录,因此必须采取…

  • Python定义计算矩阵转置的函数

    Python定义计算矩阵转置的函数定义计算矩阵转置的函数1)使用循环进行转置matrix=[[1,2,3,4],[5,6,7,8],[9,10,11,12]]#打印矩阵defprintMatrix(m):foreleinm:foreinele:print(‘%3d’%e,end=”)print(”)…

  • Stream流和Lambda表达式遍历HashMap

    Stream流和Lambda表达式遍历HashMap

  • ideal2019 30天试用结束了,在线激活码【最新永久激活】

    (ideal2019 30天试用结束了,在线激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html2JTX0APX6F-eyJsa…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号