2

短押しで 1 つのイベントを実装し、長押しで別のイベントを実装しようとしています。短く押すと、デフォルトのアクションが実行されます。長押しは機能しますが、デフォルトのアクションも実行します。私は何が欠けていますか？

  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」は短押しのデフォルトアクションを停止する必要があるという印象を受けました。私がオンラインで見つけた例は、まさに私の状況ではないようです。時間を割いて読んでいただきありがとうございます。ご意見ありがとうございます。

4

3 に答える 3

0

タイムアウトをクリアして "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」を使用します。タッチ スクリーン デバイスでは、「マウス」イベントはタッチ イベントからシミュレートされ、明確な遅延が伴います。(タッチ期間中に指が移動したかどうかを検出することもできます。)

于 2013-04-08T13:18:46.567 に答える
0

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

    });

});
于 2013-04-08T13:27:32.983 に答える
0

@Pointyは、イベントをクリックするための実用的なソリューションに私を導きます.

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

私のモバイルデバイスを長押しすると、デフォルトのオプション画面に4つのオプションが表示されるため、何かを追加する必要があります。開いて、リンクを保存し、リンク URL をコピーして、テキストを選択すると、同様にポップアップが表示されます。見つけ次第、その修正を追加します。

于 2013-04-08T14:07:37.650 に答える