怎么在html5中模拟长按事件-创新互联

本篇文章为大家展示了怎么在html5中模拟长按事件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联是一家集网站建设,雨山企业网站建设,雨山品牌网站建设,网站定制,雨山网站建设报价,网络营销,网络优化,雨山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

思路

放弃click事件，通过判断按的时长来决定是单击还是长按
使用touchstart和touchend事件
在touchstart中开启一个定时器，比如在700ms后显示一个长按菜单
在touchend中清除这个定时器，这样如果按下的时间超过700ms，那么长按菜单已经显示出来了，清除定时器不会有任何影响；如果按下的时间小于700ms，那么touchstart中的长按菜单还没来得及显示出来，就被清除了。

由此我们可以实现模拟的长按事件了。

上代码

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
css中大部分只是做了样式的美化，还有一开始让删除按钮隐藏起来

HTML:




    
    
    
    Document
    


    
        长按我

删除

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') } })

.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%); }

重庆分公司，新征程启航

怎么在html5中模拟长按事件-创新互联

其他资讯