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)


相关推荐

  • bWAPP练习

    bWAPP练习简介虚拟机下载地址: https://www.vulnhub.com/entry/bwapp-bee-box-v16,53/如果你想自己去部署环境:https://sourceforge.net/projects/bwapp/files/bee-box/bWAPP包含有100多个漏洞,包括OWASPTop10安全风险,很爽的PHPweb靶机。登录username:bee pas…

  • mba毕业后年薪一般多少_刚毕业年薪10万算什么水平

    mba毕业后年薪一般多少_刚毕业年薪10万算什么水平以前在一起读书他是学渣,我是学霸,但是为啥现在他工资多我这么多?

  • ASP.NET_动态网页怎么连接数据库

    ASP.NET_动态网页怎么连接数据库近期本人在关注实体设计的过程中一直在了解“ADO.NETEntityFramework数据模型”,从中结识了.NETFramework4中的ASP.NET动态数据,ASP.NET动态数据允许您通过在运行时从数据库架构推断数据实体的外观和行为并从中派生UI行为,创建可扩展的、数据驱动的Web应用程序。         动态数据的一个重要功能是基架机制

    2022年10月31日
  • linux——挖矿程序处理

    linux——挖矿程序处理记一次挖矿程序入侵以及解决实操!1,过程记录系统被挖矿程序入侵,导致系统CPU飙升。kill掉进程后自动重启。无论kill-9还是直接把系统中nanoWatch所对应的进程文件删除,一样会定时重启。使用crontab-e查看当前系统的定时任务信息,如下:显示定时从链接中下载文件,于是在浏览器中访问该地址,下载的文件截图如下:很明显,这是一个恶意脚本,定时检查…

  • SQL SERVER与C#中数据类型的对应关系

    对应关系表SQLServer2000 http://hovertree.com/menu/sqlserver/C#CodeSmith数据类型取值范围数据类型取值范围空值代

    2021年12月27日
  • 前端VSCode常用插件及安装

    前端VSCode常用插件及安装新手前端VSCode常用插件及其安装方法

发表回复

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

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