js原生touch事件实现微信语音按住录音，上滑取消。

最新推荐文章于 2024-08-02 19:41:56 发布

李逸风

最新推荐文章于 2024-08-02 19:41:56 发布

阅读量1.1w

点赞数 4

分类专栏： Javascript 文章标签： js touch 微信语音聊天前端

本文链接：https://blog.csdn.net/sheng_li/article/details/78400110

版权

本文介绍了如何在前端开发中利用JavaScript的touch事件来实现类似微信的语音聊天功能。用户按住录音，上滑一定距离即可取消发送。核心代码已提供，建议在Chrome浏览器的手机浏览模式下测试运行。

摘要由CSDN通过智能技术生成

由于在微信公众号上要开发语音聊天功能，前端需求就需要有一个类似微信的语音聊天，我看了下微信的语音，操作流程就是按住录音，滑动超出一定距离就取消发送。

需求确定了，下面就是敲代码了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lee-voice</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			background: #fff;
		}
		.btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 150px;
			background: #eee;
		}
		.btn input{
			width: 100%;
			height: 100%;
			font: 50px/150px 'microsoft yahei';
		}
	</style>
</head>
<body>
	<div class="btn">
		<input type="button" name="" id="messageBtn" value="按住 说话">
	</div>
	<script type="text/javascript">
		var btnElem=document.getElementById("messageBtn");//获取ID
		var posStart = 0;//初