最近在做移动端页面是,发现长按页面会出现复制功能,对页面的体验造成了不同的困扰。为了解决长按的问题,我尝试用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是你长按的元素。加上这句之后,安卓浏览器页面也不会出现菜单了,长按的问题得到解决。