I would like to disable the context menu that appears after a long tap (touch and hold) on images in my web application. I've seen posts with different ideas how to do it, but none of them seem to work for me.
Is there a way to do this on Android via HTML/CSS/Javascript?
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>
img.addEventListener('contetxmenu', function(e) { e.preventDefault(); return false; }, false); should work no? The solution above will prevent all input. –
Munitions The context menu has its own event. You just need to catch it and stop it from propagating.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
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>
img.addEventListener('contetxmenu', function(e) { e.preventDefault(); return false; }, false); should work no? The solution above will prevent all input. –
Munitions For me, absorbing all the events was not an option since I wanted to disable long press downloads while still allowing the user to zoom and pan on the image. I was able to solve this with css and html only by layering a "shield" div on top of the image like so:
<div class="img-container">
<div class="shield"></div>
<img src="img-file.jpg">
</div>
<style>
.img-container { position: relative; }
img { max-width: 100%; }
.shield {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
</style>
Hope this helps someone!
position:relative to the parent container in order to prevent the parent to take over all the space. This is specially tricky if the parent is a td which has a an ontouchstart or other interaction event handler linked to it, since you won't visually see that the td is taking up all that area. –
Menarche position: relative css rule. –
Paleobotany That can be done using CSS:
img {
pointer-events: none;
}
It will disable copy, but do not disable selection.
document.oncontextmenu = function() {return false;};
Works in webView.
touchend fires, and then the context menu is prevented from showing after having already ruined the party. –
Isolt I use the complete example by Nurik but the the element (an input image in my page) was disable for the click too.
I change the original line by this:
original line:
node.ontouchstart = absorbEvent_;
my change:
node.ontouchstart = node.onclick;
with this approuch i disable the pop-up save image menu on logpress but keep the click event.
I´m testing on a 7" tablet with Android 2.2 under a Dolphin HD browser and works fine!
Use this CSS codes for mobile
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
pointer-events: none; // for Android
-webkit-touch-callout: none; // for iOS
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none; is essentially the return false of CSS for elements, so it makes my button not work in this case. –
Jiggle I've had a similar issue. I've tried couple of solution from this thread and another thread for safari on the same problem (Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)) . The bad part was that I couldn't use onTouchStart,onTouchEnd etc...
Only prevent the event from onContextMenu. Snippet from React 16.5.2. Tested in chrome only.
<img {...props} onContextMenu={event => event.preventDefault()}
onTouchStart={touchStart}
onTouchEnd={touchEnd} />Hope it helps somebody. Cheers!
<a id="moo" href=''> </a>
<script type="text/javascript">
var moo = document.getElementById('moo');
function handler(event) {
event = event || context_menu.event;
if (event.stopPropagation)
event.stopPropagation();
event.cancelBubble = true;
return false;
}
moo.innerHTML = 'right-click here';
moo.onclick = handler;
moo.onmousedown = handler;
moo.onmouseup = handler;
</script>
Capture the onContextMenu event, and return false in the event handler.
You can also capture the click event and check which mouse button fired the event with event.button, in some browsers anyway.
Just had a similar problem. The above suggestions did not work for me in the Andoid browser, but I found that displaying the problematic image as a CSS background image rather than an embedded image fixed the problem.
Through raw javascript there are no events that get called for the context menu. Perhaps in the Java world there is something... There are actually several issues regarding javascript events (such as focus not working right) in the Android webkit.
© 2022 - 2024 — McMap. All rights reserved.