移动端html5模拟长按事件的实现方法

为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了。 大概效果如下: ps: 为了做个gif还下了app,还得通过邮件发到电脑上,脑瓜疼。。 思路 放弃click事件,通过判断按的时长来决定是单击还是长按 使用touchstart和touchend事件 在touchstart中开启一个定时器,比如在700ms后显示一个长按菜单 在touchend中清除这个定时器,这样如果按下的时间超过700ms,那么长按菜单已经显示出来了,清除定时器不会有任何影响;如果按下的时间小于700ms,那么touchstart中的长按菜单还没来得及显示出来,就被清除了。 由此我们可以实现模拟的长按事件了。 上代码 请把重点放在JS上,这里贴出来完整的代码是为了方便大家看个仔细,代码可以拷贝直接看效果 css中大部分只是做了样式的美化,还有一开始让删除按钮隐藏起来 HTML: Document
长按我
删除

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码