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.

I hope you're developing a strictly internal app for some company, and not trying to break some random web user's browser's functionalities. — ANeves, Sep 28 '11 at 12:49
It is an internal app. Right now, it wouldn't work properly with 2 windows open and it would be confusing to have one window open within our app and another open in Safari. We may fix that some day but it is not a top priority. I am not aware of anyone doing this drag gesture on our app on purpose. — Elias Zamaria, Sep 28 '11 at 17:32

score 9 · Answer 1 · answered Sep 28 '11 at 12:15

9

please check this

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

answered Sep 28 '11 at 12:15

Sanooj

2,637
15
20

Your solution fixed the problem but caused a new problem. There are some links for which I have a click handler to replace the default tap behavior, and after trying your solution, the click handlers on those links stopped working. – Elias Zamaria Sep 28 '11 at 22:40
2

Replace $('a') with $('.classname a'), where 'classname' will be that containers class. i think this resolves your problem or please revert back. – Sanooj Sep 29 '11 at 04:29
What container are you referring to? The links are in various places within the app. – Elias Zamaria Sep 30 '11 at 16:58
@mikez302 Sanooj, just put classes only on the tags that you want this behaviour; then use that as a selector in Jquery. – MrJD Oct 01 '11 at 08:45

score 1 · Answer 2 · answered Feb 11 '22 at 15:27

1

This worked for me:

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

answered Feb 11 '22 at 15:27

Franklin

46
3

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

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

edited May 23 '17 at 11:47

Community

1
1

answered Sep 29 '11 at 07:01

GoGoGarrett

613
4
16

I tried your answer and it didn't do anything. I tried the solution that you linked to and it had the same problems as Sanooj's solution to this problem. – Elias Zamaria Sep 30 '11 at 00:11

cmplieger · Answer 4 · 2011-10-02T13:15:33.490

1

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

edited Oct 02 '11 at 13:15

answered Oct 02 '11 at 12:52

cmplieger

7,155
15
55
83

I will try it when I get a chance, but I am wondering if the timeout will make the app feel slow. Also, what if the user holds his finger for more than one second? – Elias Zamaria Oct 03 '11 at 18:36
what about changing the timeout time? – cmplieger Oct 06 '11 at 17:45

score 0 · Answer 5 · answered Sep 22 '11 at 23:50

0

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.

answered Sep 22 '11 at 23:50

Martin Jespersen

25,743
8
56
68

Your idea didn't work. I also tried ondragend and that didn't work either. – Elias Zamaria Sep 23 '11 at 00:11

score 0 · Answer 6 · answered Mar 12 '23 at 18:31

0

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;

answered Mar 12 '23 at 18:31

z-x

411
1
6
14

score 0 · Answer 7 · answered Oct 04 '11 at 16:57

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.

Disabling default drag behavior on links in iOS Safari

7 Answers7