H5实现按钮的长按事件

最近要做一个手机页面，模拟遥控器对硬件设备做控制，有对镜头的上下左右摇动、聚焦等操作。

操作体验要模拟实体遥控器，只是点击一次触发一次的话体验不好，要长按不放的时候也能生效。写出代码如下，测试为了看出效果，写了个 id = tt 的 span，代码如下，只看一部分代码就行，其他三个按钮跟第一个代码基本完全一样：

    $(function () {

        var timeOutEvent = 0;
        var si = 0;

        // 向上按钮
        function shake_up() {
            // 一次向上摇多少
            $("#tt").append("上摇5度, ");
        }

        function always_shake_up() {
            //如果是按住不放，使用setInterval，每隔多少时间触发一次动作，每过500毫秒向上摇５度
            si = setInterval(shake_up, 500);
        }

        $("#move_top").on({
            touchstart: function (e) {    // 当向上按钮被开始点中时
                timeOutEvent = setTimeout(always_shake_up, 500);    // 使用setTimeout，500毫秒后执行always_shake_up
                e.preventDefault();
            },
            touchmove: function () {
                clearInterval(si);    //鼠标或手指从按钮上离开，删除间隔触发的setInterval对象
                clearTimeout(timeOutEvent);   // 清除setTimeout对象
                si = 0;
                timeOutEvent = 0;
            },
            touchend: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                if (timeOutEvent != 0) {
                    shake_up();    // timeOutEvent != 0，也就是说没有setTimeout对象，也就是还没到500毫秒就松开了手指，那就识别为一次点击，向上摇５度
                }
                return false;
            }
        });


        // 向左按钮
        function shake_left() {
            $("#tt").append("左摇5度, ");
        }
        function always_shake_left() {
            si = setInterval(shake_left, 500);
        }

        $("#move_left").on({
            touchstart: function (e) {
                timeOutEvent = setTimeout(always_shake_left, 300);
                e.preventDefault();
            },
            touchmove: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                si = 0;
                timeOutEvent = 0;
            },
            touchend: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                if (timeOutEvent != 0) {
                    shake_left();
                }
                return false;
            }
        });

        // 向右按钮
        function shake_right() {
            $("#tt").append("右摇5度, ");
        }
        function always_shake_right() {
            si = setInterval(shake_right, 500);
        }

        $("#move_right").on({
            touchstart: function (e) {
                timeOutEvent = setTimeout(always_shake_right, 500);
                e.preventDefault();
            },
            touchmove: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                si = 0;
                timeOutEvent = 0;
            },
            touchend: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                if (timeOutEvent != 0) {
                    shake_right();
                }
                return false;
            }
        });

        // 向下按钮
        function shake_down() {
            $("#tt").append("下摇5度, ");
        }
        function always_shake_down() {
            si = setInterval(shake_down, 500);
        }

        $("#move_bottom").on({
            touchstart: function (e) {
                timeOutEvent = setTimeout(always_shake_down, 500);
                e.preventDefault();
            },
            touchmove: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                si = 0;
                timeOutEvent = 0;
            },
            touchend: function () {
                clearInterval(si);
                clearTimeout(timeOutEvent);
                if (timeOutEvent != 0) {
                    shake_down();
                }
                return false;
            }
        });
    });

最终效果截图就像下面这样：

 

如果只是快速点击一下，就触发一次动作；长按不放的话，就每隔500ms触发一次动作，一直到放开按钮。

注意：手机大部分浏览器或是手机本身的界面都有长按功能，有的打开一个菜单，有的是对文字进行复制粘贴，跟我们这里自己写的长按功能冲突了。使用下面css和js来禁用原生的长按功能：

        /*如果是禁用长按选择文字功能，用css*/
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    // 如果是想禁用长按弹出菜单, 用js
    window.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });