jQuery prevent default of links inside a targeted parent DIV

Question

I have the following markup:

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

I am using Zepto to target the "target-class" to apply a double tap, but I don't want the link to be fired. This is my JS code:

$(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
    });
});

However all of these trigger the link and change the URL pattern (I am using pushState).

This is happening on Mobile Safari for iOS and Android as well.

Any guidance?

have you tried putting `return false;` at the end of your click handler? — pckill, Oct 21 '12 at 15:02
did you try adding `dblclick` as well? also live is deprecated in more recent jQuery versions, use `on()` — charlietfl, Oct 21 '12 at 15:17
.on() doesn't seem to work (I assume because it's Zepto not jQuery). I added double click and it still triggers the link to fire. — gregavola, Oct 21 '12 at 15:28
not likely implementing `on()` correctly... syntax is not same as `live`. Must use a permanent asset for `on ` `$(document).on("doubleTap",".target-class", function(){....})` — charlietfl, Oct 21 '12 at 15:49
turns out that when I change the $(a).live("click") to $("a").live("singleTap") it works, but I get a lot of accidental touches. Does it stack like: click, singleTap, doubleTap? — gregavola, Oct 23 '12 at 13:10

score 1 · Answer 1 · answered Oct 25 '12 at 14:18

I was able to get it working with the following code. Basically, you have to capture and throw away "regular" click events (be sure to stop propagation and prevent default behavior) - this will stop the default link behavior. Then use "singleTap" and "doubleTap" event handlers to capture and respond to the desired event. I tested this on Safari on iOS 6 and Chrome on Android 4.1.

<!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 prevent default of links inside a targeted parent DIV

1 Answers1