专栏首页前端资源CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。

在写页面时如何避免此类情况的发生呢?我们可以使用 CSS 来屏蔽图片的选中。

我整理了两个方案:

1、首先想到的是通过 JS 实现,对 touch 事件做处理。

window.ontouchstart = function(e) { e.preventDefault(); };

但是如果页面较长,滚动事件就失效。所以此方案无效,如果只是某个 div 有需求,可以这样处理。

2、通过 CSS3 属性实现。

img {
	pointer-events: none;
}

如果只是禁止图片选中,长按图片不会有问题,但是如果是先选择旁边的文字,同时选中了图片,那图片照样会被复制出来。

再给元素的 CSS 中添加如下两行代码:

-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;

这时候禁止选中文字就没有问题了,可以实现整篇文章不可复制或保存。

声明:本文由w3h5原创,转载请注明出处:《CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制》 https://www.w3h5.com/post/98.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript小游戏2

    添加CSS样式 这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

    Lemon黄
  • 这30个CSS选择器,你必须熟记(上)

    css的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,...

    前端达人
  • 遍历集合时删除元素,到底发生了什么

    当通过 for 循环遍历集合时,一般禁止操作 (add or remove) 集合元素。虽然开发规范里写的非常清楚,但最近还是有人掉坑里导致出了一个小 BUG,...

    芋道源码
  • RAC一个节点自动重启问题分析

    题记:在RAC数据库的故障当中,节点重启的现象很常见,在这种问题的处理当中,有一定的规律性。为了更好的说明这个问题的处理过程,保证出现该类问题的时候,能够有序的...

    孙杰
  • Linux logrotate 详细

    志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到。对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了...

    用户5760343
  • lib-flexible适配大屏方案(附移动端适配)

      相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件,属于开源项...

    流眸
  • 《Vue3.0抢先学》系列之:一个简单的例子

    书接上文:你被我撩拨了一下,从Github上下载了Vue3.0的源码。然后呢,你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢?

    一斤代码
  • rac节点频繁重启的问题分析

    环境:两台联想R680的物理机搭建一套2节点RAC,数据库版本为ORACLE 11.2.0.4

    孙杰
  • JavaScript小游戏

    这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

    Lemon黄
  • 渲染树的形成原理你真的很懂吗?

    看了上面的概念好像太“官方”,解释就是 DOM 是对 HTML 文档结构化的表述,后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引...

    coder_koala

扫码关注云+社区

领取腾讯云代金券