移动端禁用系统默认菜单,还可以这么搞?

图片描述
今天来给大家分享一下移动端如何禁用系统默认菜单,首先介绍下两个移动端私有属性
-webkit-touch-callout和-webkit-tap-highlight-color
-webkit-touch-callout:当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
-webkit-tap-highlight-color :当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
在手机webkit浏览器中,用户在某一些按钮上长按3秒钟后,会弹出一个系统的列表,ios和android各自展现不一样,列表可以有复制或在在新窗口打开的等操作,这种体验对于按钮来说是不需要的,按钮上是绑定事件,有特殊功能,而这里系统把它当做一个链接的意义。查看了代码,原来是一个a标签,链接地址为空。
查看我的兴趣爱好 在IOS平台下只需控制当前元素的-webkit-touch-callout的样式属性为none;属性来禁止触发系统的菜单 a{-webkit-touch-callout:none} 这里补充-webkit-touch-callout:none 的功能,测试结果如下: 1.ios 长按时不触发系统菜单 2.ios 和 android 长按时不触发下载图片菜单 **安卓下,只能用button ,input type=”button” 代替a标签。 看到这里是不是发现,如此轻松就可以实现禁用默认菜单效果啦,小编会不定时更新前端相关的知识,有兴趣的话欢迎大家加群142991222一起讨论交流学习。