jsFiddle Demo

Question

我正在尝试为短按而实施一个事件，为长按而实现不同的事件。短按只是做默认动作。长按工作，但仍然默认操作。我错过了什么？

  HTML
   <a href="http://myLocation" class="recordlongpress"><"Label for my Link"</a>

  Javascript
    $(document).ready(function(){
        $('.recordlongpress').each(function() {

        var timeout, longtouch;

        $(this).mousedown(function() {
            timeout = setTimeout(function() {
                longtouch = true;
            }, 1000);
        }).mouseup(function(e) {
            if (longtouch) {
                e.preventDefault();
                $('#popupPanel').popup("open");
                return false;
            } else {
                return;      
            }
            longtouch = false;
            clearTimeout(timeout);
        });

    });
});

我遵循了jQuery文档并且留下了印象“preventDefault”应该停止短按默认操作。我在网上找到的任何例子似乎都不是我的情况。感谢您抽出宝贵时间阅读本文。感谢您的任何意见。

Answer 1

在清除超时并将“longtouch”设置为false之前，您将从“mouseup”处理程序返回。

尝试：

    }).mouseup(function(e) {
        var returnval;

        if (longtouch) {
            e.preventDefault();
            $('#popupPanel').popup("open");
            returnval = false;
        } 

        longtouch = false;
        clearTimeout(timeout);

        return returnVal;
    });

我还会在“mousedown”处理程序中清除“longtouch”。也就是说，我不会用鼠标事件做到这一点。我会用“touchstart”和“touchend”。在触摸屏设备上，“触摸事件”模拟“鼠标”事件，并且涉及明显的延迟。（您可能还想检测手指在触摸期间是否移动。）

Answer 2

jsFiddle Demo

在您的代码中，这些行无法访问

     longtouch = false;
     clearTimeout(timeout);

<强> JS：

 $('.recordlongpress').each(function () {

    var timeout, longtouch = false;

    $(this).mousedown(function () {

        timeout = setTimeout(function () {
            longtouch = true;
        }, 1000);
        e.preventDefault();
    }).mouseup(function (e) {
        clearTimeout(timeout);
        if (longtouch == true) {
            longtouch = false;
            $('body').append("long press" + longtouch);

            return false;
        } else {
            return;
        }

    });

});

Answer 3

@Pointy带领我找到点击活动的工作解决方案。

    $(document).ready(function(){
    $('.recordlongpress').bind('tap', function(event) {
        return;
    });
    $('.recordlongpress').bind('taphold', function(event) {
        $('#popupPanel').popup("open");
    });
});

还需要添加一些东西，因为长按我的移动设备，默认选项屏幕有四个选项;打开，保存链接，复制链接URL和选择文本仍然弹出。一旦我找到它，我会添加修复。

Jquery长按，停止短按动作不起作用

3 个答案:

jsFiddle Demo