避免在移动设备上按下按钮时长按行为

Question

在我的 HTML 中有一个可以短按和长按的按钮。如果您很快单击它（就像在每个其他按钮上一样），它会执行给定的回调函数。当您按住按钮时，回调将重复执行，直到检测到 mouseup 或 mouseout 事件。

var onBtnClick = function (evt, callback) {
        //only react to left mouse button
        if (evt.which == 1) {
            //save 'this' context and interval/timeout IDs
            var self    = this,
                interval= null,
                timeout = null;

            //react to a single click
            callback();

            //when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners
            self.on("mouseup mouseout", function () {
                window.clearTimeout(timeout);
                window.clearInterval(interval);
                self.blur();
                self.off("mouseup mouseout");
            });

            //on a long click call the callback function within an interval for faster value changing
            timeout = window.setTimeout(function () {
                interval = window.setInterval(callback, 50);
            }, 300);
        }
    },

    i = 0,

    cb = function () {
        console.log(i++);
    };

$("button").mousedown(function(evt) {
    onBtnClick.call($(this), evt, cb);
});

这在桌面环境中运行良好。但是：在移动设备上使用网站时，不会注册长按，因为浏览器检测到右键单击（长按）。

是否可以在移动设备上从桌面重新创建行为？我怎样才能做到这一点？

Answer 1

您将希望为移动设备添加 touchstart 和 touchend 事件。此外，您需要确保为他们提供的功能包括对evt.preventDefault() 的调用。这样做有效地告诉移动浏览器“嘿，你知道你现在通常想做的事情吗？不要那样做。”

也就是说，您提供的代码的更新版本应该如下所示：

var onBtnClick = function (evt, callback) {
        //only react to left mouse button or a touch event
        if (evt.which == 1 || evt.type == "touchstart") {
            //save 'this' context and interval/timeout IDs
            var self    = this,
                interval= null,
                timeout = null;

            //react to a single click
            callback();

            //when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners
            self.on("mouseup mouseout touchend", function (evt) {
                window.clearTimeout(timeout);
                window.clearInterval(interval);
                self.blur();
                self.off("mouseup mouseout touchend");
                evt.preventDefault();
            });

            //on a long click call the callback function within an interval for faster value changing
            timeout = window.setTimeout(function () {
                interval = window.setInterval(callback, 50);
            }, 300);
        }
    },

    i = 0,

    cb = function () {
        console.log(i++);
    };

$("button").mousedown(function(evt) {
    onBtnClick.call($(this), evt, cb);
});

$('#hold').on('touchstart', function (evt) {
    onBtnClick.call($(this), evt, cb);
    evt.preventDefault();
});

关键更改：在 if 检查中添加了|| evt.type == "touchstart"，以便捕获鼠标左键和触摸事件，在mouseup 和mouseout 事件列表中添加了touchend，在函数中添加了evt.preventDefault()这会清除您的超时，并添加了一个 on('touchstart' jQuery 调用以确保您的按钮实际上专门监听触摸和点击。