Disabling the context menu on long taps on Android
This should work on 1.6 or later (if I recall correctly). I don't believe there's a workaround for 1.5 or earlier.
<!DOCTYPE html>
<html>
<head>
<script>
function absorbEvent_(event) {
var e = event || window.event;
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
return false;
}
function preventLongPressMenu(node) {
node.ontouchstart = absorbEvent_;
node.ontouchmove = absorbEvent_;
node.ontouchend = absorbEvent_;
node.ontouchcancel = absorbEvent_;
}
function init() {
preventLongPressMenu(document.getElementById('theimage'));
}
</script>
</head>
<body onload="init()">
<img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>
Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
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.
How to restrict default context menu on long press in android/ios devices and show custom menu?
It's the same as disabling right click - add this listener:
document.addEventListener('contextmenu', event => event.preventDefault());
Tested on Firefox for Android
Related Topics
Need to Find Height of Hidden Div on Page (Set to Display:None)
How to Print HTML Content on Click of a Button, But Not the Page
How to Change the Background Image of Div Using JavaScript
Calculate Color Values from Green to Red
CSS and Jquery: Spaces Inside Image Name Break Code of Url()
How to Change Reactjs Styles Dynamically
Jquery Mobile Prevent Scroll-To-Top Before Page Transition
Show Dynamically Added Navlinks When Added in Bootstrap Navbar
Is Ruby Strongly or Weakly Typed
Converting Milliseconds to a Date (Jquery/Javascript)
Changing Iframe Src with JavaScript
How Does Sort Function Work in JavaScript, Along with Compare Function
Mismatched Anonymous Define() Module
How to Cache an Image in JavaScript
Difference Between (Function(){})(); and Function(){}();