如何在移动端web端禁止长按选择文字以及弹出菜单

在做移动端页面时,当用户用手机打开网站,当在上面用手指进行一些用户操作时

如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢，用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;  
    } 
   // 这是input
   input {      
      -webkit-user-select:auto; /*webkit浏览器*/     
   } 
  // 如果是想禁用长按弹出菜单, 用js的话,阻止默认事件  
  window.addEventListener('contextmenu', function(e){  
      e.preventDefault();  
  });

通常来讲,写上面的css代码,使用use-select:none,就可以了的,阻止用户长时间按屏幕选中文字,以及弹出默认菜单的

在玩一些h5小游戏时,点击屏幕或长按屏幕时,就会触发默认事件,这样很影响用户体验

比如:如下的圣诞老人过桥小游戏,就使用了上面的代码的

如何在复制网站文字时添加版权声明

2022-09-30

vuejs中三级Tab切换并刷新页面时保持当前激活状态,使用query或params结合本地存储实现(内含视频)

2022-09-16

关于script中type的使用-2

2022-09-07

点击左下角可阅读原文