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 回答