为啥写这篇文章

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在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. Python之取整

    在编程过程中数据处理是不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理.取整的方式则包括向下取整.四舍五入.向上取整等等.下面就来看看在Python中取整的几种方法吧 ...

  2. MYSQL5.5二进制包的安装

    二进制1. 下载包 wget http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.5.55-linux2.6-i686.tar.gz2. 解压 tar xx ...

  3. 阶段3 2.Spring_02.程序间耦合_2 编译期依赖

    通过maven可以看到这个资源不存在 找到本地仓库,mysql 5.17确实没有jar包 在pom.xml内把版本改成5.16 5.1.6在本地仓库内是完整的版本 运行我们的测试方法 把依赖注释掉 再 ...

  4. 基于 Node.js 的服务器自动化部署搭建实录

    基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...

  5. python中利用队列asyncio.Queue进行通讯详解

    python中利用队列asyncio.Queue进行通讯详解 本文主要给大家介绍了关于python用队列asyncio.Queue通讯的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细 ...

  6. 在DBGrid中，按ctrl+Delete不让删除,怎么实现

    DBGrid的Options中的dgConfirmDelete改为:False;在DBGrid所连接的DataSet的BeforeDelete事件中写:Abort; ^_^

  7. 【OpenCV开发】imread和imwrite的类型以及第三个参数关于图片压缩质量等

    本片参考博客:http://blog.csdn.net/poem_qianmo/article/details/20537737 基于OpenCV3.0,与原博客有出入. 在OpenCV1.0时代,基 ...

  8. 使用graphics.h来绘制图形

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. graphics.h是TC里面的图形库,如果要用的话应该用TC来编译.分为:像素函数.直线和线型函数.多边形函数.填充函数等.然而在我们使 ...

  9. c语言Ι博客作业04

    这个作业属于哪个课程 c语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/9771 我在这个课程的目 ...

  10. [转帖]数据库默认驱动、URL、端口

    超详细的各种数据库默认驱动.URL.端口总结 http://database.51cto.com/art/201906/598043.htm 学习了解一下.  概述 今天主要对各种数据库默认端口和UR ...