移动端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制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
AmazeUI中模态框的实现
Aug 19 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动态函数调用方法
2015/05/21 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python实现控制COM口的示例
2019/07/03 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python用户自定义异常的实现
2020/12/25 Python
送餐员岗位职责范本
2014/02/21 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
幼儿园辞职书
2015/02/26 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
客户答谢会致辞
2015/07/30 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸