当前位置：文江博客话题详情

在 Android 上长按时禁用上下文菜单

发布于 2024-09-13 04:05:56 字数 129 浏览 4 评论 0原文

我想禁用在网络应用程序中长时间点击（触摸并按住）图像后出现的上下文菜单。我看过关于如何做到这一点的不同想法的帖子，但它们似乎都不适合我。

有没有办法通过 HTML/CSS/Javascript 在 Android 上做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心房的律动 2024-09-20 04:05:56

上下文菜单有自己的事件。你只需要抓住它并阻止它传播。

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};

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;
};

回复收藏 0 原文

策马西风 2024-09-20 04:05:56

这应该适用于 1.6 或更高版本（如果我没记错的话）。我不认为 1.5 或更早版本有解决方法。

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

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>

回复收藏 0 原文

东风软 2024-09-20 04:05:56

这可以使用 CSS 来完成：

img {
  pointer-events: none;
}

That can be done using CSS:

img {
  pointer-events: none;
}

回复收藏 0 原文

我不会写诗 2024-09-20 04:05:56

对我来说，吸收所有事件不是一个选择，因为我想禁用长按下载，同时仍然允许用户缩放和平移图像。我只能用 css 和 html 解决这个问题，只需在图像顶部放置一个“shield”div，如下所示：

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

希望这对某人有帮助！

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!

回复收藏 0 原文

风吹过旳痕迹 2024-09-20 04:05:56

它将禁用复制，但不会禁用选择。

document.oncontextmenu = function() {return false;};

在 webView 中工作。

It will disable copy, but do not disable selection.

document.oncontextmenu = function() {return false;};

Works in webView.

回复收藏 0 原文

最美不过初阳 2024-09-20 04:05:56

我使用 Nurik 的完整示例，但该元素（我页面中的输入图像）也无法单击。

我通过以下方式更改原始行：

原始行：

node.ontouchstart = absorbEvent_;

我的更改：

node.ontouchstart = node.onclick;

使用此方法，我禁用 logpress 上的弹出保存图像菜单，但保留单击事件。

我正在运行 Android 2.2 的 7 英寸平板电脑上使用 Dolphin HD 浏览器进行测试，运行良好！

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!

回复收藏 0 原文

塔塔猫 2024-09-20 04:05:56

使用此 CSS 代码用于移动设备

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

Use this CSS codes for mobile

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

回复收藏 0 原文

踏雪无痕 2024-09-20 04:05:56

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; // 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;

回复收藏 0 原文

你的往事 2024-09-20 04:05:56

我也有类似的问题。我已经在这个线程和另一个线程中尝试了几个解决方案来解决同一问题（阻止移动 Safari (iPad / iPhone) 中长按/长按时出现默认上下文菜单)。不好的部分是我无法使用 onTouchStart、onTouchEnd 等...

只能阻止 onContextMenu 的事件。 React 16.5.2 的片段。
仅在 Chrome 中进行了测试。

    <img {...props} onContextMenu={event => event.preventDefault()}
    onTouchStart={touchStart}
    onTouchEnd={touchEnd} />

希望它对某人有帮助。干杯!

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!

回复收藏 0 原文

同尘 2024-09-20 04:05:56

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

捕获 onContextMenu 事件，并在事件处理程序中返回 false。

无论如何，在某些浏览器中，您还可以捕获单击事件并使用 event.button 检查哪个鼠标按钮触发了该事件。

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

回复收藏 0 原文