0

次のマークアップがあります。

<div id="someID" class="target-class">
   ....
   <a href="#page1">
     ....
   </a>
</div>

Zepto を使用して「ターゲットクラス」をターゲットにしてダブルタップを適用していますが、リンクを起動したくありません。これは私のJSコードです:

$(document).ready(function() {
    $(".target-class").live("doubleTap", function(e) {
         e.preventDefault();
         e.stopPropagation();

         var a = $(this).attr("id");

         // do something here
    });

    $("a").live("click", function(e) {
         // do something with all my links
    });
});

ただし、これらはすべてリンクをトリガーし、URL パターンを変更します (私は pushState を使用しています)。

これは、iOS および Android の Mobile Safari でも発生しています。

ガイダンスはありますか？

4

1 に答える 1

1

次のコードで動作させることができました。基本的に、「通常の」クリック イベントをキャプチャして破棄する必要があります (伝播を停止し、デフォルトの動作を防ぐようにしてください)。これにより、デフォルトのリンク動作が停止します。次に、「singleTap」および「doubleTap」イベント ハンドラーを使用して、目的のイベントをキャプチャして応答します。iOS 6 の Safari と Android 4.1 の Chrome でこれをテストしました。

<!DOCTYPE html>
<html>
<head>
    <title>test doubletap</title>
    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />

</head>

<style>
    body {
        font-size: 200%;
    }
    a {
        background-color: yellow;
    }
</style>
<body>

<div id="someID" class="target-class" style="height:200px;">
    text here in the div
    <a href="#page1">page1</a>
    <a href="#page2">page2</a>
    <a href="#page3">page3</a>
    more text here in the div
</div>

<div id="output"></div>


<script src="zepto.js"></script>
<script>

function log(input) {
    var html = $("#output").html();
    $("#output").html( html + "<br/>" + input.toString() );
}

$(document).ready(function() {
    $(".target-class").on("doubleTap", function(e) {
        //handle the double-tap event

        var a = $(this).attr("id");
        log(e.type + " - " + a);

        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    $("a").on("click", function(e) {
        //throw away all link "click" events to prevent default browser behavior
        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    $("a").on("singleTap", function(e) {
        //handle the single click and update the window location hash/fragment

        var a = $(event.target);
        var href = a.attr("href");
        log( e.type + ": " + href );
        window.location.hash = href;

        e.stopPropagation();
        e.preventDefault();
        return false;
    });
});
</script>

</body>
</html>
于 2012-10-25T14:18:59.943 に答える