javascript - Disabling default drag behavior on links in iOS Safari - Stack Overflow

admin管理员组

文章数量:1222446

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 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.

• javascript
• html
• css
• ios
• safari

Share Improve this question Follow edited Sep 30, 2011 at 23:29 Elias Zamaria asked Sep 22, 2011 at 23:40 Elias ZamariaElias Zamaria 101k3333 gold badges120120 silver badges150150 bronze badges 2

• 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 Commented Sep 28, 2011 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 Commented Sep 28, 2011 at 17:32

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 9 +50

please check this

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

This worked for me:

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

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

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;

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.

本文标签： javascriptDisabling default drag behavior on links in iOS SafariStack Overflow