如何禁止移动端浏览器长按对图片弹出保存

发布网友 发布时间:2022-04-20 22:43

我来回答

4个回答

懂视网 时间:2022-05-13 16:10

  最近做了一个图片阅后即焚的网页在移动端浏览,过程是按住屏幕并移动时,图片会慢慢展示,松开手时图片立即粉碎消失。

  但是长按图片时会触发浏览器自带的长按事件,从网上搜索得知有以下两种方法:

  1.添加事件 ontouchstart = "return false;"

  2.css统一加上 -webkit-user-select:none; -webkit-touch-callout:none;

  但是上述方法对页面的其他需求有影响,最终我采用的方法是,写一个空的透明的DIV置于页面最上层遮住所有元素,这样就可以避免系统的长按事件,在需要屏蔽长按事件时,隐藏DIV即可,DIV样式:{position:fixed;width:100%;height:100%;z-index:99;background:rgba(255,255,255,0);overflow:hidden;top:0px;left:0px;}

PS:过程中还遇到一下小问题就是,在需要长按二维码识别的页面,已经移除了当前页面的遮罩DIV,但是长按还是没反应。

  二维码开始样式是:{width:46%;position:fixed;left:27%;top:40%;}

  后来发现必须给二维码加上层高 z-index:100;大于遮罩DIV的层高。

热心网友 时间:2022-05-13 13:18

img { pointer-events: none; }

热心网友 时间:2022-05-13 14:36

写这种东西大多数都是在电脑上吧
这应该是手机浏览器功能的问题,你找一下你的手机浏览器设置里面
这个功能我还没用到过的,你也可以试一下手机QQ浏览器
供功能还是很强大的,兼容性强,比较人性化

热心网友 时间:2022-05-13 16:11

这个是手机自身的设置,跟浏览器关系不是很大呀,你在其他的应用里,长按都会有保存选项弹出的。你要是想对你的网页进行测试,用手机QQ浏览器就很不错,他的网页打开速度快,你可以很快速的看到你的结果,而且不会因为自身问题出现报错之类的现象,排除了应用自身的问题干扰,希望可以帮到你哈。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com