Disabling default drag and drop behavior for links in Safari iOS

Question

I am developing a web application. I am trying to disable most of the default iOS Safari behavior for links, so I set the CSS property "-webkit-touch-callout" in the links to "none". However, I still notice that if I swipe the link for a second or so, drag it and then release it, and the link will open in a new window. I do not want this behavior. I would like it to either open in the same window or do nothing. Does anyone know how to do this?

EDIT: I use jQuery, so it’s quite normal to use jQuery event handling functions if this makes things easier.

EDIT 2: For some links, I use handlers to override their default behavior. For instance:

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

My actual code is more complex than this, but I want to say that I am redefining the default action for clicks on some links and any solution that I use to fix this problem should not interfere with these handlers . Sanooj's solution does not work for my purposes, because assigning "window.location" always redirects the browser, regardless of whether I have handlers to prevent this behavior. Maybe I might not have to use links for this purpose, but that was before I started working on it, and changing that would be a great project. I am wondering if there is a simpler and easier way to fix this.

Answer 1

please check it

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

Answer 2

Set the timeout before loading 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 encoder, but you get the idea :)

Answer 3

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

Answer 4

I know you said you already tried it, but you may run into a specific problem. You can try something like this.

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

Hope this helps.

If this does not solve your problem, try here.

Answer 5

To solve the problem with the Sanooj solution, have you tried calling your own functions from your suggested code? For instance:

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

I cannot verify this using the web application at the moment, but it works for me in a normal browser, i.e. prevents normal behavior, but also allows me to call certain functions based on classes.