按下按钮时避免在移动设备上出现长按行为 [英] Avoid long-tap behaviour on mobile devices while pressing a button

问题描述

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

In my HTML there is a button that can be short- and long-clicked. If you click on it shortly (like on every other button) it executes a given callback function. When you keep pressing the button the callback will be repeatedly executed until a mouseup or mouseout event is detected.

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

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

This works fine on desktop environments. BUT: When using the website on a mobile device the long click wont be registered as the browser detects a right-click (long-tap).

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

推荐答案

您将需要为移动设备包含 touchstart 和 touchend 事件.此外，您需要确保为它们提供的函数包括对 evt.preventDefault() 的调用.这样做有效地告诉移动浏览器嘿，你知道你现在通常想要做的事情吗?不要那样做."

You're going to want to include touchstart and touchend events for mobile. Additionally, you're going to want to make sure the functions you give for them includes a call to evt.preventDefault(). Doing this effectively tells the mobile browser "Hey, you know that thing you normally want to do right now? Don't do that."

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

That said, an updated version of the code you provided should look like this:

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

关键变化:添加了<代码>||evt.type == "touchstart" 到 if 检查，以便您捕获鼠标左键和触摸事件，将 touchend 添加到 mouseup 列表和mouseout 事件，将 evt.preventDefault() 添加到清除超时的函数，并添加一个 on('touchstart' jQuery 调用以确保您的按钮实际上是专门监听触摸和点击.

Key changes: Added || evt.type == "touchstart" to the if check so that you capture both left mouse button and touch events, added touchend to the list of mouseup and mouseout events, added evt.preventDefault() to the function that clears your timeouts, and added an on('touchstart' jQuery call to ensure your button is actually listening specifically for touches as well as clicks.

这篇关于按下按钮时避免在移动设备上出现长按行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！