vue 简单实现屏蔽移动端复制功能

最新推荐文章于 2025-03-25 10:00:04 发布

狂风是我的热情

最新推荐文章于 2025-03-25 10:00:04 发布

阅读量4.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_24010663/article/details/82628359

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了在Vue项目中如何防止移动端用户复制内容，列举了多种方法，包括覆盖、阻止默认事件、利用touch事件及长按事件，其中部分方法在特定环境下效果有限，提供了一种使用透明罩层的思路，但可能需要解决布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于医生提供的资料都比较宝贵，所以要求在移动端不能复制。特地总结一下网上和自己的几个方法。

一方法实现

1.第一种覆盖大多数的方法

 *{
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;	#但是安卓不行
 }
   input {
  -webkit-user-select:auto; /*webkit浏览器*/
}

2.第一种在上面，第二种

<div onselectstart="return false;">
  -webkit-touch-callout:none;
 -moz-touch-callout:none;
 -ms-touch-callout:none;
 touch-callout:none;

这种在微信浏览器安卓不能复制，但是在安卓的网页上依旧可以复制

3.使用原生js阻止默认事件

1
2
3

document.oncopy = function(e){
      e.preventDefault();
    }

在多数安卓机子都无效

4.第四种，触摸的默认事件是滑动：

1	ontouchstart="return false"

5.在vue里面实现，阻止默认的长按事件

##html

<div v-longtap="conpytouch">
hello
</div>

###vue

export default{
data(){...},
components:{},
method:{
copytouch:function(e,s){
        e.preventDefault=true
        alert("长按了！！")//这里可进行复杂的处理，我
      到这步已经莫名其妙好了},
}
}

6.做一个透明罩，增加一个div，设置它的z-index为一个比较大的值

div{
height:100%;
width:1000%;
position:absolute;
z-index:1000;#越大越在上面
opacity:0;#越大越不透明
}

这里还没实验过，但是思路和主要的两个元素在上面了，可能布局有问题，需要调整

二相关基础知识

1.touch事件

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发
touchmove:      //手指在屏幕上滑动式触发
touchend:       //手指离开屏幕时触发
touchcancel:    //系统取消touch事件时触发

touch事件的详细介绍：[http://caibaojian.com/mobile-touch-event.html]