移动端禁用系统默认菜单

浏览: 23 发布日期: 2016-12-13 分类: html

首先介绍两个移动端私有属性
-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标签,链接地址为空。

<a href="#" class="btn">查看余额</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标签

返回顶部