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

最新推荐文章于 2024-12-10 20:30:42 发布

itclanCoder

最新推荐文章于 2024-12-10 20:30:42 发布

阅读量4k

点赞数

文章标签： css java js python html

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/127139228

版权

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

如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢，用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小游戏时,点击屏幕或长按屏幕时,就会触发默认事件,这样很影响用户体验

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