Question

我有以下标记：

<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上。

任何指导？

Answer 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>

jQuery防止目标父DIV内的链接默认

1 个答案: