html 中，如何让安卓 Chrome 禁止被长按呼出菜单？

This topic created in 1391 days ago, the information mentioned may be changed or developed.

一个 html 有个背景 div ，里面放了一些图片啥的，在安卓的 chrome 上，本来是要长按复制 html 上的内容，但是很容易长按到空白区域的背景上，这时候就会弹出分享啊、下载、新标签打开此图片啥的菜单。

搜索了一下有个“onselectstart="return false" onselect="document.selection.empty()"”
添加到 div 中，似乎不起作用。

HTML

div

Chrome

菜单

12 replies • 2022-09-01 16:35:46 +08:00

ragnaroks

Aug 31, 2022

style user-select:none

dengshen

Aug 31, 2022 via iPhone

@ragnaroks
@ragnaroks 这样就不能选中了。楼主的需求需要自己重写了

ragnaroks

Sep 1, 2022

@dengshen 能弹出操作的必然是 img 标签，对此标签不允许选择就行

lingxiaoli

Sep 1, 2022

-webkit-touch-callout: none;

CSGO

Sep 1, 2022

@ragnaroks
@lingxiaoli
都不行耶，还是会被长按到。

ragnaroks

Sep 1, 2022

codepen 把 demo 发出来

CSGO

Sep 1, 2022 via Android

@ragnaroks 是不是把 img 换成 div 的背景就能解决？我先试下。

ragnaroks

Sep 1, 2022

@CSGO 也可以，看你具体怎么写的，最好是吧代码放出来

CSGO

Sep 1, 2022

@ragnaroks 把 img 换成 div 也不行耶，现在是 div ，用手机 chrome 打开依然可以长按到背景： https://wyfang.github.io

ragnaroks

Sep 1, 2022

@CSGO 我这里测试，手机上的 firefox 、via 、chrome 在空白处长按均不会弹出针对 https://wyfang.github.io/img/bg.gif 的菜单

ragnaroks

Sep 1, 2022

body 下创建一个新 div

div.bgp {
filter: opacity(10%) blur(10px);
background-image: url(/img/bg.gif);
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
z-index: 0;
position: fixed;
user-select: none;
}

div.wifi-body {
z-index: 1;
}

CSGO

Sep 1, 2022

@ragnaroks 我也不会了，难道是我刚改完 github 还没推送完。。。太感谢你的细心回复