本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于移动端HTML5模拟长按删除事件(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。为啥写这篇文章
最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了。
大概效果如下:
思路
放弃click事件,通过判断按的时长来决定是单击还是长按
使用touchstart和touchend事件
在touchstart中开启一个定时器,比如在700ms后显示一个长按菜单
在touchend中清除这个定时器,这样如果按下的时间超过700ms,那么长按菜单已经显示出来了,清除定时器不会有任何影响;如果按下的时间小于700ms,那么touchstart中的长按菜单还没来得及显示出来,就被清除了。
由此我们可以实现模拟的长按事件了。
上代码
请把重点放在JS上,这里贴出来完整的代码是为了方便大家看个仔细,代码可以拷贝直接看效果
css中大部分只是做了样式的美化,还有一开始让删除按钮隐藏起来
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
< html >
< 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 >
< div id = "label" >长按我</ div >
< div >删除</ div >
</ div >
< script src = "./longpress.js" ></ script >
</ body >
</ html >
|
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .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只有在移动端设备上才有用,如果要看代码示例的话请:
即点击如下图:
以上就是移动端HTML5模拟长按删除事件(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5 video怎么停止播放视频
如何使用HTML5 canvas绘制线条
HTML5幻灯片系统:h5slides
HTML5实践-使用css3如何完成google涂鸦动画的详解
canvas与h5如何实现视频截图功能
HTML5是什么技术
HTML5 是什么意思
怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解(二)
用HTML5制作屏幕手势解锁功能
h5在canvas中实现自定义路径动画
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 移动端HTML5模拟长按删除事件(附代码)