js实现禁止复制,黏贴和选取-------Day54

传统意义上的交互,在我理解看来,应该是用户通过键盘操作或者鼠标操作,给电脑作出指令,然后电脑根据所得到的指令来作出相应的响应,所以我把键盘操作和鼠标操作看做是一种交互的手段(触摸屏暂时还没有考虑,还不太了解),而如果在web应用中,浏览器才是真正意义上交互的一个桥梁,用户对页面上的事物作出指令,电脑将响应的结果重新在浏览器上显示,那么对浏览器的操作也不得不加入学习的征程。

这里先来记录一下,禁止选取、复制和黏贴。

通常我们进行复制、剪切的手段有两种:

1、选中想要操作的部分,点击鼠标右键,然后选取复制或者剪切;

2、选中想要操作的部分,按鼠标快捷键ctrl+c复制;ctrl+v复制和ctrl+x剪切等

我们来一一进行解决,首先要解决的是右键选择复制或者剪切问题,这个问题在自定义鼠标右键的时候曾经碰到并记录过,在这里再来回忆一下:

document.body.οncοntextmenu=function(){
  return false;//返回false,则将鼠标完全屏蔽
}
当然也可以更干脆一点,直接不允许拖拽,如果无法拖拽,则就没法确定要选的内容,在这里我们可以这样写:

document.body.οndragstart=function(){
  return false;//无法拖拽,自然无法选定内容
}
如果第一个方法还是对右键的操作,那么在左键的操作中,同样可以用ondragstart()来通过避免选取来解决复制剪切问题,其实可以一一进行设定,从而解决单个复制或者还是剪切的问题。

οnpaste="return false";//禁止粘贴
oncut="return false";//禁止剪切
οncοpy="return false";//禁止复制
这样来总结下我们解决问题的方法,实际上有三个方面的考虑:

1、直接不允许选中内容;ondragstart

2、禁止右键

3、禁止复制、粘贴和选取//这里就是解决鼠标左键


七月开始,加油..




评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值