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

大佬教程收集整理的这篇文章主要介绍了移动端html5模拟长按事件的实现方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

大佬总结

以上是大佬教程为你收集整理的移动端html5模拟长按事件的实现方法全部内容，希望文章能够帮你解决移动端html5模拟长按事件的实现方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。