jQuery長按，停止短按操作不起作用

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(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演示

在您的代碼中，這些行不可訪問

     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以及選擇文本仍然會彈出。 找到修補程序后，我將對其進行補充。