为啥写这篇文章

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在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. APP测试流程梳理

    APP测试流程梳理 1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试 ...

  2. 使用 Python* 的英特尔® 分发版实现 Unity* 机器学习入门（第 1 部分）

    本文将向游戏开发人员介绍如何使用强化学习创建更好的人工智能 (AI) 行为.使用Python* 的英特尔® 分发版 — 常用面向对象的高级编程语言的进阶版 — 读者可收集关于如何训练预先存在的机器语言 ...

  3. LeetCode.942-DI字符串匹配(DI String Match)

    这是悦乐书的第361次更新,第388篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第223题(顺位题号是942).给定仅包含I(增加)或D(减少)的字符串S,令N = S ...

  4. MyView 的无奈问题

    这不是为难我吗这种问题  据说这是内置库!!!!!可是: 找不到呀!!!!!!!!!! 后期补充: 是因为我的一个目录名字起了冲突

  5. USACO1.6 Superprime Rib

    题目传送门 每一个特殊质数都会被从右边切掉,所以除了首位外的其它位数一定都不会是偶数,只能是$1$,$3$,$5$,$7$,$9$ 而每一个特殊质数的首位一定是质数,也就是$2$,$3$,$5$,$7 ...

  6. Systemd vs SysVinit

  7. 【VS开发】解决位图缩放失真

    当用以下函数加载一张位图时,当窗口发生重绘更改大小时,位图将失真: CBitmap bitmap;  bitmap.LoadBitmap(IDB_BITMAP2);  BITMAP bmp;  bit ...

  8. Jmeter 04 Jmeter变量的使用

    在使用jmeter进行接口测试时,我们难免会遇到需要从上下文中获取测试数据的情况,这个时候就需要引入变量了. 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件-> ...

  9. tableau单机版安装

    参考: https://help.tableau.com/current/server-linux/zh-cn/requ.htm   先将服务器防火墙80级8850端口打开 临时关闭SELinux/防 ...

  10. 4、android studio打包的时候遇到的问题

    那就去掉该签名 但是如果使用generated apk的话,则是不会去调用build.gradle文件的,需要使用gradle命令来打包 https://blog.csdn.net/cencibuqi ...