Disabling default drag behavior on links in iOS Safari

Question

I am developing a web app. I am trying to disable most of the default iOS Safari behavior on links so I set the "-webkit-touch-callout" CSS property on the links to "none". However, I still notice that if I hold my finger on a link for a second or so, then drag it, then let go of it, the link will open in a new window. I don't want this behavior. I would like it to either open in the same window, or do nothing at all. Does anyone know how to make this happen?

EDIT: I am using jQuery so it is OK to use jQuery's event-handling functions if that will simplify things.

EDIT 2: For some links, I am using handlers to override their default behavior. For example:

$(".categoryList a").live("click", function(e) {
    e.preventDefault();
    $.get(
        "someOtherUrl",
        {someVariable: "someValue"},
        function(result) {
            $(".result").html(render(result));
        }
    );
});

My actual code is more complicated than this but my point is that I am overriding the default click action on some links and whatever solution I use to fix this problem should not interfere with these handlers. Sanooj's solution does not work for my purposes because the "window.location" assignment always redirects the browser regardless of whether I have any handlers to prevent this behavior. Maybe I arguably shouldn't use links for this purpose but this is how the app was before I started working on it and changing this would be a big project. I am wondering if there is an easier and simpler way to fix this.

Answer 1

please check this

$('a').live('click', function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});

Answer 2

I know you said you already tried it, but you might be running into a specificity issue. You can try something like this.

* {
    -webkit-touch-callout: none !important;
}

Hope this helps.

If this doesn't solve your problem, try here

Answer 3

Set a timeout before loading the ajax content and detect finger movements:

 function setupAnchorClicks() {
  var timer = null;
  $(".categoryList a").live("click", function(e) {
    e.preventDefault();

    timer = setTimeout(function() {
       // ...
    }, 1000);

  }).live("touchmove", function() {
    clearTimeout(timer);
  });
}

setupAnchorClicks();

This probably doesn't work out of the box because I'm a terrible javascript coder, but you get the idea :)