html 长按事件,html5 按钮点击事件
为啥写这篇文章
最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在应用上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。
大概效果如下：
ps:为了做个可交换的图像格式还下了app，还得通过邮件发到电脑上，脑瓜疼。
思路
放弃点击事件，通过判断按的时长来决定是单击还是长按使用开始触摸和触摸端事件在开始触摸中开启一个定时器，比如在700毫秒后显示一个长按菜单在触摸端中清除这个定时器，这样如果按下的时间超过700毫秒，那么长按菜单已经显示出来了，清除定时器不会有任何影响；如果按下的时间小于700毫秒，那么开始触摸中的长按菜单还没来得及显示出来，就被清除了。由此我们可以实现模拟的长按事件了。
上代码
请把重点放在射流研究…上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
钢性铸铁中大部分只是做了样式的美化，还有一开始让删除按钮隐藏起来
HTML:
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge 标题文档/标题链接rel=样式表 type= text/CSS href= ./长按。CSS //head body div class= container div class= label id= label 长按我/div div class=delete_btn 删除/div /div script src= ./长按。js /脚本/正文/html js
let timer=null let start time= let end time= const label=document。查询选择器(.label’)常量删除BTN=文档。查询选择器(.删除_ BTN)标签。addevent listener( touch start ，function(){ start time=new Date()timer=setTimeout(function(){ delete BTN。风格。display= block }，700)})标签。addevent listener( touch end ，function(){ end time=new Date()clear time out(timer)if(end time-start time 700){//处理点击事件标签。班级名单。添加( selected )} })CSS。容器{位置：相对；显示：内嵌-块；边距-顶部：50px}。label { display:inline-block；框大小：边框-框；宽度：105像素高度：32px行高：32px背景色：# F2F2F2颜色：# 5 F5 f5f文本对齐：居中；边框半径：3px字体大小：14px}。标签。选定的{背景色：# 4180 cc颜色：白色；}.delete _ BTN {显示：无；位置：绝对；top:-8px；左：50%;transform:平移x(-50%)平移y(-100%)；颜色：白色；填充：10px 16px背景色：rgba(0，0，0，7);边框-半径：6px行高：1;空白：nowrap字体大小：12px}。{内容：""之后的删除_btn:为；宽度：0;高度：0;边框宽度：5px边框样式：纯色；边框颜色：rgba(0，0，0，7)透明透明透明；位置：绝对；底部：-9px；左：50%;transform:平移x(-50%)；}ps:触摸开始和触摸端只有在移动端设备上才有用，如果要看代码示例的话请：
用铬F12打开调时窗切换到模拟移动设备即点击如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。