为啥写这篇文章

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在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. 40组合总和II

    题目:给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合.candidates 中的每个数字在每个组合中只能使用一 ...

  2. Haproxy 代理

    一:安装haproxy 1:解压   编译   安装 tar zxf haproxy-1.7.9.tar.gz cd  haproxy-1.7.9 uname -e make TARGET=linux ...

  3. Python的组合模式与责任链模式编程示例

    Python的组合模式与责任链模式编程示例 这篇文章主要介绍了Python的组合模式与责任链模式编程示例,组合模式与责任链模式都属于Python的设计模式,需要的朋友可以参考下 组合模式 我们把Com ...

  4. cocos2dx基础篇(1) Cocos2D-X项目创建

    已经入行工作半年多时间了,以前都是把这些东西记录在有道云上面的,现在抽出些时间把以前的笔记腾过来. 具体的环境配置就不用说了,因为现在已经是2018年,只需要下载对应版本解压后就能使用,不用再像多年前 ...

  5. 【HTTP】四、HTTP协议常见问题

      HTTP协议是一个非常重要的应用层协议,在面试中有很多关于这方面的问题,这里做一个总结,大部分都在前面的文章中提到了,没提到的这里做一个介绍. 1.HTTP协议的基本原理.工作流程   HTTP协 ...

  6. 9.Jmeter 多个threadgroup 中的配置元件会一次性进行初始化

    例如3个threadGroup,每一个threadGroup中都会定义了 一些配置原件,例如 用户定义变量,  jdbc 链接配置等.  当执行testplan(测试计划)时, 这些配置元件会一起初始 ...

  7. python 三元运算、列表推倒式、字典推倒式、生成器生成式

    1.三元运算 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(res) 2.列表推倒式 #1.示例 egg_ ...

  8. Akka系列（三）：监管与容错

    前言...... Akka作为一种成熟的生产环境并发解决方案,必须拥有一套完善的错误异常处理机制,本文主要讲讲Akka中的监管和容错. 监管 看过我上篇文章的同学应该对Actor系统的工作流程有了一定 ...

  9. Idea 竖选文本、竖向选择、横向纵向选择文本代码

    在使用Idea的时候,可能需要在相同类型的文字中增加数据,所以Idea提供一种列式选择方式,提高开发的效率. 如果需要使用,我们可以选中代码,右键单击,在弹出的菜单中选中[Column Selecti ...

  10. 写出java.lang.Object类的六个常用方法

    java是面向对象的语言,而Object类是java中所有类的顶级父类(根类). 每个类都使用Object类作为超类,所有对象(包括数组)都实现这个类的方法,即使一个类没有用extends明确指出继承 ...