移动端html5模拟长按事件的实现方法


Posted in HTML / CSS onSeptember 30, 2018

为啥写这篇文章

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

大概效果如下:

移动端html5模拟长按事件的实现方法

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只有在移动端设备上才有用,如果要看代码示例的话请:

  1. 用chrome
  2. F12打开调时窗
  3. 切换到模拟移动设备

即点击如下图:

移动端html5模拟长按事件的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 #HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 #HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 #HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 #HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 #HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 #HTML / CSS
You might like
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python之str操作方法(详解)
2017/06/19 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python3.x实现base64加密和解密
2019/03/28 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
护校行动方案
2014/05/31 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
详解Redis基本命令与使用场景
2021/06/01 Redis
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技