h5移动端浏览器无法禁用图片长按保存的问题

最新推荐文章于 2022-12-08 13:56:05 发布

KentKun

最新推荐文章于 2022-12-08 13:56:05 发布

阅读量805

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/kentkun/article/details/123467313

版权

这篇博客探讨了在H5移动端浏览器中如何禁用图片长按弹出菜单的问题。通过设置CSS样式pointer-events:none和背景图片，尝试阻止长按事件，但并未完全成功。内容适合前端开发者，特别是关注移动优化和用户体验的人员。

摘要由CSDN通过智能技术生成

关于h5移动端浏览器无法禁用图片长按菜单的问题

<style>
.text {
        pointer-events: none;
        background: url(./logo.png) no-repeat;
    }
</style>
<div class="img"></div>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KentKun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【h5长按事件】H5页面监听长按和点击事件

weixin_48596030的博客

08-15

5664

【h5长按事件】H5页面监听长按和点击事件

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案

热门推荐

alize的博客

07-12

1万+

img{ pointer-events:none;/* 禁止长按图片保存 */ }

【web前端】20.手机端网页禁止长按图片保存图片

返璞归真

07-15

7665

最近做项目遇到一个问题，就是img图片长按会从底部弹出来保存图片的弹框，因为页面上不需要这个功能，所以产品要求去掉，解决这个问题，有两种方法： 1. 利用css img属性 img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;} 2. 设置背景图片用div层的ba...

移动端H5网页开发常见问题汇总

苏纯的博客

11-16

2181

前面笔者已经介绍了 2022-移动端H5网页开发必备知识，这篇文章主要是总结下移动端开发常见问题，帮助大家一起避坑。

HTML5对手机页面长按会粘贴复制禁用的解决方法

12-13

解决方法如下所示：直接在CSS ... /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:non

h5 安卓/IOS长按图片、文字禁止选中或弹出系统菜单的解决方法

03-14

2017

最近在做IM的语音功能，发现当长按录音的时候手机会弹出来系统菜单，IOS下bug形式：1）长按的标签设置为css background的形式：不会弹出菜单；2）但是当设置为img时，系统默认识别为保存图片的行为，因而会产生以下系统菜单：　　　　　　　3）当前标签为纯文字时，会弹出选中文字的系统菜单；安卓的bug形式如下：　　1）当设置为css的background形式时候，系统默认...

H5移动端常用代码及知识点

weixin_45567983的博客

10-21

1350

一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 1...

H5移动端常见问题

happy任的博客

04-13

2260

h5 常见问题 1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面一、HTML 页面结构 // width 设置 viewport 宽度，为一个正整数，或字符串 'device-width' // height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // mi...

内嵌h5，禁止长按图片保存

故里的博客

07-20

2745

1.pointer-events:none img{ pointer-events:none; } ①适用于微信客户端的手机页面，图片被打开的情况 ②缺点：会禁止掉点击事件。所以当图片有点击事件的时候，给有点击事件的图片设置pointer-events:auto;那么这个图片又可以长按保存了。解决办法：建议外边嵌套一层div，在div上绑定事件。 img{ user-select:none; -webkit-touch-callout:none; -webkit-use

禁止移动端h5长按下载图片（笔记）

业余前端的职业经历

12-08

725

ios好像有的默认就不支持长按下载图片 1.

移动端阻止用户长按，弹出保持文本，以及保存图片

qq_39831708的博客

09-17

4902

css样式上的俩种方案 1.不能被选择 user-select:none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; 2.禁用系统默认菜单 touch-callout:none; -webkit-touch-callout:none; -ms-touch-callout:none; ...

H5移动端禁止长按保存图片

weixin_44709338的博客

12-24

1441

给img标签添加css属性, 我这个海报连接是通过微信分发，所以在微信中直接访问是生效的，也是手机自带浏览器测试生效。 ```img { pointer-events:none; }

移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片

qq_29596627的博客

05-18

5581

/*移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片*/img{ pointer-events: none;vertical-align: sub;}

html5+CSS 实现禁止IOS长按复制粘贴功能

Xjiayi的博客

02-24

4440

/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ ...

h5页面禁止复制_禁止复制网页内容的方法（含PC端和移动端）

weixin_36357157的博客

02-01

3091

在网页的Html中，如果想实现禁止鼠标右键、禁止全选、复制、粘贴，可以考虑JS来实现，方式有很多种。PC端禁止复制网页内容的方法oncontextmenu事件禁用右键菜单，js代码：document.oncontextmenu = function(){event.returnValue = false;}// 或者直接返回整个事件document.oncontextmenu = function...

移动端禁止长按图片弹出菜单和禁止文本选择

卜小娴的博客

07-27

7886

禁止长按图片弹出菜单img{ pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-select:none; -o-user-select:none; user-select:n

H5移动端图片压缩上传实现与踩坑解析

本文将介绍H5移动端图片压缩上传的基本流程，并分享一些开发过程中可能遇到的问题。首先，我们需要了解三个关键概念：FileReader、Blob和FormData。 1. FileReader是HTML5中用于读取文件的API，它可以异步读取...