移动端页面阻止长按复制和弹出菜单

最近在做移动端页面是,发现长按页面会出现复制功能,对页面的体验造成了不同的困扰。为了解决长按的问题,我尝试用css去解决该问题,在长按的元素加上以下css:

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;

加上这些样式之后,ios浏览器的网页长按的问题得到了解决,没有出现复制相关的内容;安卓浏览器虽然当前长按的元素没有选择,但是在其它文字上出现了复制的菜单。原来 user-select 能够阻止文字选择,但是不能阻止菜单出现。为了禁用长按出现菜单,我们需要对长按的元素加以下js:

node.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

node是你长按的元素。加上这句之后,安卓浏览器页面也不会出现菜单了,长按的问题得到解决。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值