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();
    });