pc端和移动端鼠标事件,实现与微信按住说话差不多的按键

1、移动端：

事件类型：

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

直接上栗子，做一个简单的按住说话，移开一定距离提示松开取消：

<input type="button" name="" id="messageBtn" value="按住 说话" />

js：

initEvent() {var btnElem = document.getElementById("messageBtn"); var posStart = 0; //初始化起点坐标var posEnd = 0; //初始化终点坐标var posMove = 0; //初始化滑动坐标btnElem.addEventListener("touchstart", function(event) {console.log(event);event.preventDefault();posStart = 0;posStart = event.touches[0].pageY; //获取起点坐标btnElem.value = "松开 结束";console.log("start");});btnElem.addEventListener("touchmove", function(event) {event.preventDefault();posMove = 0;posMove = event.targetTouches[0].pageY; //获取滑动实时坐标if (posStart - posMove < 200) {btnElem.value = "松开 结束";} else {btnElem.value = "松开手指，取消发送";}});btnElem.addEventListener("touchend", function(event) {event.preventDefault();posEnd = 0;posEnd = event.changedTouches[0].pageY; //获取终点坐标btnElem.value = "按住 说话";console.log("End");if (posStart - posEnd < 200) {console.log("发送成功");} else {console.log("取消发送");console.log("Cancel");}});}

2、在pc端的鼠标事件：

mousedown：按下鼠标后触发

mouseup：松开鼠标后触发

mousemove：移动鼠标时触发

与上面栗子一样：

<div class="send-text"><input type="button" name="" id="messageBtn" value="按住 说话" />
</div>

js：

initEventRecord() {var that = this;var btnElem = document.getElementById("messageBtn"); //获取IDvar posStart = 0; //初始化起点坐标var posEnd = 0; //初始化终点坐标var posMove = 0; //初始化滑动坐标var boxElem = document.getElementById("send-text");btnElem.onmousedown = function(event) {event = that.enFn(event);btnElem = event.target;posStart = event.pageY;btnElem.value = "松开 结束";boxElem.onmousemove = move;boxElem.onmouseup = stop;console.log("dadad");};const move = function(event) {event = window.event;posMove= event.pageY;console.log(posStart - posEnd);// console.log(event);if (posStart - posMove > 10) {console.log("cac12222222222222222222222222222222222");btnElem.value = "松开鼠标，取消发送";boxElem.onmousemove = btnElem.onmouseup = null;} else {btnElem.value = "松开 结束";}};const stop = function(event) {event = window.event;posEnd = event.pageY;console.log(event);btnElem.value = "按住 说话";if (posStart - posEnd > 30) {console.log("取消发送");console.log("Cancel");} else {console.log("发送成功");}boxElem.onmousemove = boxElem.onmouseup = null;};},

注意onmousemove与onmouseup是父级的元素去移动或者说弹起；间隔数据自己调好判断就行

pc端和移动端鼠标事件,实现与微信按住说话差不多的按键相关推荐

在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现
问题解决 @mouseenter.@mousedown等鼠标事件[非鼠标点击事件]时,发现事件不触发,失效了此时应该在@mouseenter.@mouseenter等鼠标事件加上native属性就好 ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
【JS教程】移动端 Touch（触摸）事件
一.pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...
iPad 手指触摸与PC鼠标事件
iPad上没有鼠标,所以手指在触发触摸事件(TouchEvent)的时候,系统也会产生出模拟的鼠标事件(MouseEvent). 这对于普通网页的浏览需求而言,基本可以做到与PC端浏览器无明显差异.但 ...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type=&quo ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
如何在 PC 机上测试移动端的网页？
如何在 PC 机上测试移动端的网页?如果用 HTML5 写的页面,想兼容 iOS.Android 平台的手机,在 PC 机上看有些效果可能不准确,但不可能在每个移动终端都放上去看下效果吧,一般用什么工 ...
移动滑块在PC端与移动端的兼容
你可能需要的小知识(一) 移动滑块在PC端与移动端的兼容前言大家好,我是阿k,一个前端新人.从这篇文章开始,这个系列就计划跟大家分享我日常工作中碰到的一些问题以及我的解决方案,也许你正好需要,我也 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...

pc端和移动端鼠标事件,实现与微信按住说话差不多的按键

pc端和移动端鼠标事件,实现与微信按住说话差不多的按键相关推荐

最新文章

热门文章