为啥写这篇文章

最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在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. nodejs之简单应用与运行

    1.nodejs第一个应用,入口函数为http.createServer() var http=require('http');//1.引入 http 模块 //2.用 http 模块创建服务 htt ...

  2. iframe嵌套的页面之间传值问题

    项目中很多时候会遇到需要用 iframe 嵌套页面的情况.有时候会有这样的需求: iframe 嵌套的页面 A ,点击之后要跳到页面 B ,但是同时还需要 A 页面中的某个属性值. 此时可以先把 A ...

  3. 使用SpringWebFlow

    使用SpringWebFlow 本章主要内容: · 创建会话式的Web应用程序 · 定义流程状态和行为 Spring Web Flow 是Spring MVC 的扩展,它支持开发基于流程的应用程序.它 ...

  4. Go语言入门 不错

    Go入门 Go介绍 部落图鉴之Go:爹好还这么努力? 环境配置 安装 下载源码编译安装 下载相应平台的安装包安装 下载地址:https://golang.org/dl/ Linux上的apt-get, ...

  5. 第八周总结and实验

    1.实验目的 理解异常的基本概念:掌握异常处理方法及熟悉常见异常的捕获方法. 2.实验要求 练习捕获异常.声明异常.抛出异常的方法.熟悉try和catch子句的使用.掌握自定义异常类的方法. 3.实验 ...

  6. ucloud自动创建instance

    用terrform for ucloud: https://www.terraform.io/docs/providers/ucloud/index.html https://docs.ucloud. ...

  7. Codeforces 1156F Card Bag（概率DP）

    设dp[i][j]表示选到了第i张牌,牌号在j之前包括j的概率,cnt[i]表示有i张牌,inv[i]表示i在mod下的逆元,那我们可以考虑转移,dp[i][j]=dp[i-1][j-1]*cnt[j ...

  8. AppCan打包问题

    在AppCan IDEA打包的时候出了错误, Failed reading value of registry key: Software\JavaSoft\Java Runtime Environm ...

  9. C++新型强制类型转换。

    C++强制类型转换分为4个不同的类型. 1.static_cast -用作基本类型转换. -不能用于基本类型指针转换. -可以用于有继承关系对象之间的转换和类指针之间的转换. #include < ...

  10. 实现 RSA 算法之改进和优化（第三章）（老物）

    第三章 如何改进和优化RSA算法 这章呢,我想谈谈在实际应用出现的问题和理解. 由于近期要开始各种忙了,所以写完这章后我短时间内也不打算出什么资料了=- =(反正平时就没有出资料的习惯.) 在讲第一章 ...