如何在移动端web端禁止长按选择文字以及弹出菜单
在做移动端页面时,当用户用手机打开网站,当在上面用手指进行一些用户操作时如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢,用css几行代码就可以解决/*如果是禁用长按选择文字功能,用css*/*{-webkit-touch-callout:none;-webkit-...
·

在做移动端页面时,当用户用手机打开网站,当在上面用手指进行一些用户操作时
如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢,用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小游戏时,点击屏幕或长按屏幕时,就会触发默认事件,这样很影响用户体验
比如:如下的圣诞老人过桥小游戏,就使用了上面的代码的

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

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)