为啥写这篇文章

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。

大概效果如下：

ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。

思路

  • 放弃click事件，通过判断按的时长来决定是单击还是长按
  • 使用touchstart和touchend事件
  • 在touchstart中开启一个定时器，比如在700ms后显示一个长按菜单
  • 在touchend中清除这个定时器，这样如果按下的时间超过700ms，那么长按菜单已经显示出来了，清除定时器不会有任何影响；如果按下的时间小于700ms，那么touchstart中的长按菜单还没来得及显示出来，就被清除了。

由此我们可以实现模拟的长按事件了。

上代码

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
css中大部分只是做了样式的美化，还有一开始让删除按钮隐藏起来

HTML:

<!DOCTYPE html>

<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">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="./longpress.css" />

</head>

<body>

    <div class="container">

        <div class="label" id="label">长按我</div>

        <div class="delete_btn">删除</div>

    </div>

    <script src="./longpress.js"></script>

</body>

</html>

JS

let timer = null

let startTime = ''

let endTime = ''

const label = document.querySelector('.label')

const deleteBtn = document.querySelector('.delete_btn')

label.addEventListener('touchstart', function () {

  startTime = +new Date()

  timer = setTimeout(function () {

    deleteBtn.style.display = 'block'

  }, 700)

})

label.addEventListener('touchend', function () {

  endTime = +new Date()

  clearTimeout(timer)

  if (endTime - startTime < 700) {

    // 处理点击事件

    label.classList.add('selected')

  }

})

CSS

.container {

    position: relative;

    display: inline-block;

    margin-top: 50px;

}

.label {

    display: inline-block;

    box-sizing: border-box;

    width: 105px;

    height: 32px;

    line-height: 32px;

    background-color: #F2F2F2;

    color: #5F5F5F;

    text-align: center;

    border-radius: 3px;

    font-size: 14px;

}

.label.selected {

    background-color: #4180cc;

    color: white;

}

.delete_btn {

    display: none;

    position: absolute;

    top: -8px;

    left: 50%;

    transform: translateX(-50%) translateY(-100%);

    color: white;

    padding: 10px 16px;

    background-color: rgba(0, 0, 0, .7);

    border-radius: 6px;

    line-height: 1;

    white-space: nowrap;

    font-size: 12px;

}

.delete_btn::after {

    content: '';

    width: 0;

    height: 0;

    border-width: 5px;

    border-style: solid;

    border-color: rgba(0, 0, 0, .7) transparent transparent transparent;

    position: absolute;

    bottom: -9px;

    left: 50%;

    transform: translateX(-50%);

}

ps: touchstart和touchend只有在移动端设备上才有用，如果要看代码示例的话请:

  • 用chrome
  • F12打开调时窗
  • 切换到模拟移动设备

即点击如下图:

最后

欢迎交流~

移动端h5模拟长按事件的更多相关文章

  1. 手机端js模拟长按事件（代码仿照jQuery）

    代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...

  2. 移动端h5摇一摇事件

    // 摇一摇动作 //获取加速度信息 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断. //而为了防止正常移动的误判,需要给该变化率设置一个合适的临 ...

  3. 移动端H5长按事件 vue自定义指令

    import Vue from 'vue' Vue.directive('longpress', function (el, binding){ var timer = null; var start ...

  4. 【转】原生js实现移动端h5长按事件

    $("#target").on({ touchstart: function(e) { // 长按事件触发 timeOutEvent = setTimeout(function() ...

  5. 微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  6. 前端提升生产力系列三（vant3 vue3 移动端H5下拉刷新，上拉加载组件的封装）

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

  7. 手摸手，带你实现移动端H5瀑布流布局

    移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...

  8. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  9. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

随机推荐

  1. iOS 图表工具charts之LineChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  2. iOS多选实现注意点

    下面对APP的多选选择列表实现进行总结,为了在以后的每个项目的多选实现,测试总是提一样的bug总结的. 具体的实现代码就不复制粘贴了,不过在多选问题上遇到问题的可以我们一起讨论讨论的哈... 可能总结 ...

  3. lnmp宝塔面板问题

    使用宝塔面板后,无法安装zabbix客户端的依赖包,总是提示mariadb冲突,其实mariadb早就卸载完了,所以要安装zabbix客户端就不好使用宝塔面板

  4. unieap platform eclipse.ini vm设置

    -vm C:\Program Files (x86)\Java\jdk1..0_45\bin\javaw.exe -startup plugins/org.eclipse.equinox.launch ...

  5. 使用svctraceviewer查看WCF服务异常信息

    这两天遇到一个问题,调用一个WCF服务的时候,服务器端正常的返回了数据,但是客户端却遇到了一场 System.ServiceModel.CommunicationException: The unde ...

  6. Libra的思考

    这几年关注了很多的新技术,近期让我觉得值得一讲的是blockchain,刚巧6.18号就发布了Libra 他是这么介绍自己的 libra https://developers.libra.org/bl ...

  7. IDEA 对spring boot Maven 项目打 Jar 包

    <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> ...

  8. Mac 如何将apache的这个默认目录更改到用户目录下

    如何将apache的这个默认目录更改到用户目录下. 做如下更改即可: 1.在自己的用户目录下新建一个Sites文件夹,我的用户目录为gaocuili 2.进到cd /etc/apache2/users ...

  9. zabbix监控大数据

    参考: https://github.com/Staroon/zabbix-hadoop-template 支持监控HDFS.NameNode, YARN ResourceManager, Hive, ...

  10. Git_命令初解