Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

Question

For a website I want to show a custom context menu when a user "longpresses" the screen. I've created a jQuery Longclick listener in my code to show a custom context menu. The context menu is displayed, but the iPad's default context menu is also displayed! I tried to prevent this by adding a preventDefault() to the event in my listener, but this does not work:

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

Questions

Can you prevent the iPad's default context menu to show?
Can it by done using the jQuery Longclick plugin?

The Longclick plugin has some specific handling for the iPad (assuming by this snippet of it's source code):

if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
  $(this)
  .bind(_mousedown_, schedule)
  .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
  .bind(_click_, click)
}

So I assume this answers my second question (assuming the plugin used the correct event).

Jasper de Vries · Accepted Answer · 2021-04-29T08:07:19.987

33

Thanks to JDandChips for pointing me to the solution. It works perfectly in combination with the longclick plugin. For documentation sake I'll post my own answer to show what I did.

HTML:

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

The Javascript already was OK:

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

The fix was to add these rules to the style sheet:

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

Disabled context menu example.

edited Apr 29 '21 at 08:07

answered Sep 18 '12 at 07:42

Jasper de Vries

19,370
6
64
102

its working on jsfiddle.net but not working on local page Why? – RGA Dec 04 '12 at 14:18
2

This is only a solution for longclick on anchors. If you have an input area, text area or some other form of content editor this does not solve the problem of the default context menu appearing. – Jason Sep 05 '13 at 09:20
1

@RGA the problem was caused by referencing Javascript using `https`. I've fixed this. – Jasper de Vries Dec 20 '13 at 08:46
1

To fix your fiddle, reference files from github off of cdn.rawgit.com or rawgit.com (depending on production/dev) - http://rawgit.com/ – 1800 INFORMATION Mar 06 '15 at 01:32
This solution comes close to performing a task which I am trying to accomplish. Allowing text selection but displaying a custom menu that allows actions to be performed on that text (thus disabling the iOS callout menu). Anyone here know how I can do that? If you have any ideas for a possible solution on how I can do that, please [offer an answer to the question here](http://stackoverflow.com/questions/33134184/custom-taphold-context-menu-in-ios-text-selection). Thanks in advance! – JayGee Oct 14 '15 at 19:44

score 22 · Answer 2 · edited Oct 28 '14 at 14:58

22

<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

If you want disable only anchor button tag use this:

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

edited Oct 28 '14 at 14:58

Jasper de Vries

19,370
6
64
102

answered Oct 28 '14 at 14:31

Narsingh Tomar

487
5
15

1

Applying this globally to all links is a bad practice on mobile websites. – pronebird Nov 14 '14 at 09:51
This works on iphone ios9. My father often longclicks on a listview item and this css disables the popup. – A.W. Dec 06 '15 at 15:49
4

I highly recommend against the star selector and would even label it an anti-pattern in this context. Shutting off a basic browser feature across the board will likely cause you problems down the road. This hatchet-for-a-scalpel type approach is what makes projects go downhill. Option two, however, is acceptable, as long as you do it in targeted scenarios. That's just my 2 cents. – dudewad Jan 18 '16 at 07:07

score 9 · Answer 3 · answered Aug 11 '13 at 19:33

9

A quick css solution:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

user-select disables highlighting text/areas.
touch-callout disables context menu popup.

answered Aug 11 '13 at 19:33

Federico

6,388
6
35
43

1

i want the user to still select, but i dont want the context menu to popup.... when i removed -webkit-user-select: none;, it still shows the context menu for me :( – Satyam Aug 26 '13 at 07:22
Why not `html { display: none !important; }` ? – pronebird Nov 14 '14 at 09:53
Doesn't work for me on iPad. Seems impossible to disable Safari longpress on IPad – Cybernetic Dec 29 '22 at 01:05

score 7 · Answer 4 · edited Apr 29 '21 at 08:09

7

No need to use JavaScript, It can be performed using css.

For disabling context menu only for images, Use

img{
-webkit-touch-callout: none !important; 
 -webkit-user-select: none !important; }

If we need to disable context menu for particular classes, Use

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }

edited Apr 29 '21 at 08:09

Jasper de Vries

19,370
6
64
102

answered Jul 03 '19 at 09:15

ExOrIntro

221
3
7

score 3 · Answer 5 · edited May 23 '17 at 11:55

3

I don't have an iPad so couldn't test a solution, but I did come across a similar question, which was resolved. I don't know if it will be of any help to you, but here is the link: How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

edited May 23 '17 at 11:55

Community

1
1

answered Sep 14 '12 at 12:53

JDandChips

9,780
3
30
46

score 2 · Answer 6 · answered Dec 29 '22 at 01:30

2

None of the CSS answers worked for me.

The only thing that worked for me:

document.addEventListener("contextmenu", (e) => {e.preventDefault()});

answered Dec 29 '22 at 01:30

Cybernetic

12,628
16
93
132

score 1 · Answer 7 · answered May 31 '15 at 00:29

There's no need to rely on -webkit- properties.

If your link is a Javascript call, it's as easy as removing the href="void(0)" completely! Your ontouchend or onclick attributes will still work. If you want the link to look original, add this css:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

This will run a lot smoother, especially when there are hundreds of links in the page.

You can also extend this to "real" page-links at the cost of SEO loss:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

Not exactly good practice for most websites, but for a specific mobile-friendly situation (mobile web app) this can be crucial.

Happy coding!

score 0 · Answer 8 · answered Nov 26 '17 at 21:48

0

This github repository work for me. In my case I write an iPad app using UIWebView.

https://github.com/vaidik/jquery-longpress

answered Nov 26 '17 at 21:48

Dody Rachmat Wicaksono

986
13
11

Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

8 Answers8

Linked