【原】[webkit移动开发笔记]之禁止触发系统默认菜单

在手机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 长按时不触发下载图片菜单

 

对于ios，我们可以使用-webkit-touch-callout:none，那么如何如何禁止 android 系统默认菜单呢？

实践中，发现在android2.x系统中设置a标签的href属性为 javascript:void(0) ，即链接属性为空，可以禁止系统默认菜单

<a href="javascript:void(0);" class="btn">查看余额</a>

而对于部分android4.x系统，这种做法又失效了，android机器真是各种疯啊...

后来在 Web前端业界传说中氛围最好群——鬼懿IT 寻求帮助

，

要使用a标签目前还是找不到最优的解决办法，如果把a标签用 button 或者 input button 来替换的确可以解决该问题，但是没有a标签被点击时产生的半透明灰色背景效果，用户体验一般

<button class="btn">查看余额</button>
或者
<input type="button" class="btn" value="查看余额"/>

一点经验谈，希望给遇到过的童鞋带来帮助，如果大家有更好的意见，欢迎留言讨论~