手机端js长按事件

最新推荐文章于 2024-09-08 13:28:47 发布

转载最新推荐文章于 2024-09-08 13:28:47 发布 · 1.5k 阅读

收录于

当前文章被收录于：

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种在手机端实现长按事件的方法，通过使用jQuery库，详细展示了如何为按钮元素设置长按（touchstart）、移动（touchmove）和结束（touchend）事件监听器，从而在触摸屏幕超过400毫秒时触发长按事件。

作用范围：手机端
作用内容：实现长按事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<script src="../js/jquery-1.8.3.min.js"></script>

<body>
<button style="height: 1000px;width: 1000px" id="target">点击</button>
</body>
<script>
    $(function () {
        $("#target").on({
            touchstart: function (e) {
                // 长按事件触发
                timeOutEvent = setTimeout(function () {
                    timeOutEvent = 0;
                    alert('你长按了');
                }, 400);
                //长按400毫秒
            },
            touchmove: function () {
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
            },
            touchend: function () {
                clearTimeout(timeOutEvent);
                if (timeOutEvent != 0) {
                    // 点击事件
                    alert('你点击了');
                }
                return false;
            }
        })
    })

</script>
</html>

标签

#js #长按事件