web前端领域移动端自定义长按事件你用过吗？

最新推荐文章于 2024-12-25 16:55:03 发布

qq_19891827

最新推荐文章于 2024-12-25 16:55:03 发布

阅读量4.2k

点赞数

分类专栏：移动端web开发文章标签：移动端 web前端长按事件 touchstart touch事件

本文链接：https://blog.csdn.net/qq_19891827/article/details/79442913

版权

移动端web开发专栏收录该内容

4 篇文章

订阅专栏

本文探讨了如何在移动端Web前端中禁用默认的长按行为，并提供了自定义长按事件的实现案例，通过示例展示了长按事件如何应用于按钮，实现特定功能，如数组增长。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。在移动端开发过程中经常会用到长按事件，例如游戏中人物，长按上下左右会持续移动人物的位置，这是一个典型的长按事件的需求，但javaScript原生不支持长按事件，这就需要我们自定义一个长按事件以满足我们的需求。

1.由于移动端长按元素会触发许多默认行为，所以第一步我们要禁掉这些默认行为，css代码如下。

body {
   -webkit-touch-callout: none !important; /*当触摸并按住触摸目标时，禁止系统默认菜单。*/
}
 .long{
  -webkit-user-select: none;/*使文本元素不能被选择*/
}

2.移动端有原生触摸事件，touchstart:手指触摸屏幕，touchmove:手指在屏幕上滑动，touchend:手指离开屏幕；因此我的基本思路是，当手指触摸屏幕的目标元素时启用一个定时器在固定时间间隔内反复触发某行为，当手指离开屏幕时，清理定时器停止复发该行为。

3.具体操作案例如下：这里通过长按该按钮达到下面的数组持续增长的行为。代码如下：

<style>
        body {
            -webkit-touch-callout: none !important;
        }
        .long{
            -webkit-user-select: none;
        }
</style>

<div style="margin-left: 200px;margin-top: 100px">
  <button class="long" style="width:100px;height:100px; user-select: none;"></button>
</div>
<div style="margin-top: 100px;margin-left: 100px">
  <span id="num" style="font-size: 100px;">5</span>
</div>

<script>
    var long = document.getElementsByClassName('long')[0];
    var timer = null;
    long.ontouchstart = function(){
        plus('#num');
    };
    long.ontouchend = function(){
        clearTimeout(timer);
    };
    function plus(ele){
        var targetEle = document.querySelector(ele);
        var num = parseInt(targetEle.innerText);
        console.log(targetEle.innerText);
        targetEle.innerText = ++num;
        timer = setTimeout(function(){
            plus(ele);
        }, 200);
    }
</script>