Disabling default drag behavior on links in iOS Safari

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 redirect开发者_C百科s 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.

please check this

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

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

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 :)

This worked for me:

a {
  -webkit-user-drag: none;
}

I don't know if this will work, but on default webkit (chrome/safari) you set the attribute ondragstart="return false;" to disable default drag behavior.

To resolve your issue with Sanooj's solution have you tried calling your own functions from within his suggested code? For example:

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

I can't test this with a Web App at the moment but it works for me in a normal browser, i.e. it prevents the normal behaviour but also allows me to call specific functions based on classes.

As of iOS 16.3 to effectively disable all of the overlays that appear on long press you have to add those to the element CSS:

-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-user-drag: none;