移动端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图片边框border-image的用法
Jun 30 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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支持页面回退的两种方法[转]
2007/02/14 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Three.js基础学习教程
2017/11/16 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python字典基本操作实例分析
2015/07/11 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python生成并处理uuid的实现方式
2020/03/03 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Android interview questions
2016/12/25 面试题
启动一个线程是用run()还是start()
2016/12/25 面试题
学校安全工作汇报材料
2014/08/16 职场文书
博士生专家推荐信
2015/03/25 职场文书
工作证明格式范文
2015/06/15 职场文书
市场营销计划书
2019/04/24 职场文书
Python合并多张图片成PDF
2021/06/09 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Linux磁盘管理方法介绍
2022/06/01 Servers