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

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

搜索了一下有个“onselectstart="return false" onselect="document.selection.empty()"”
添加到 div 中,似乎不起作用。
1122 次点击
所在节点    问与答
12 条回复
ragnaroks
2022-08-31 19:36:23 +08:00
style user-select:none
dengshen
2022-08-31 23:28:26 +08:00
@ragnaroks
@ragnaroks 这样就不能选中了。楼主的需求需要自己重写了
ragnaroks
2022-09-01 08:14:11 +08:00
@dengshen 能弹出操作的必然是 img 标签,对此标签不允许选择就行
lingxiaoli
2022-09-01 10:41:11 +08:00
-webkit-touch-callout: none;
CSGO
2022-09-01 11:29:16 +08:00
@ragnaroks
@lingxiaoli
都不行耶,还是会被长按到。
ragnaroks
2022-09-01 11:31:27 +08:00
codepen 把 demo 发出来
CSGO
2022-09-01 11:35:35 +08:00
@ragnaroks 是不是把 img 换成 div 的背景就能解决?我先试下。
ragnaroks
2022-09-01 11:41:20 +08:00
@CSGO 也可以,看你具体怎么写的,最好是吧代码放出来
CSGO
2022-09-01 15:45:55 +08:00
@ragnaroks 把 img 换成 div 也不行耶,现在是 div ,用手机 chrome 打开依然可以长按到背景: https://wyfang.github.io
ragnaroks
2022-09-01 16:11:43 +08:00
@CSGO 我这里测试,手机上的 firefox 、via 、chrome 在空白处长按均不会弹出针对 https://wyfang.github.io/img/bg.gif 的菜单
ragnaroks
2022-09-01 16:16:07 +08:00
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
2022-09-01 16:35:46 +08:00
@ragnaroks 我也不会了,难道是我刚改完 github 还没推送完。。。太感谢你的细心回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/876774

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX