移动端禁用系统默认菜单

SegmentFault 发布于2019-08-01 16:04 / 1340人阅读

摘要：首先介绍两个移动端私有属性，当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。这个属性可以让你禁用系统默认菜单。如果未设置透明度，使用默认的透明度。

首先介绍两个移动端私有属性
-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标签

云服务器 GPU云服务器禁用右键菜单禁用移动存储设备 jquery 菜单移动 asp可移动菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50273.html

[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0
初始化移动样式

摘要：一属性基本含义控制的大小为设备的宽度初始的缩放比例允许用户缩放到的最小比例允许用户缩放到的最大比例用户是否可以手动缩放忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地一、meta 属性基本含义： content=width=device-width：控制 viewport 的大小,device-width 为设备的宽度 ini...

e10101 2019-08-29 16:19 评论0 收藏0
初始化移动样式

摘要：一属性基本含义控制的大小为设备的宽度初始的缩放比例允许用户缩放到的最小比例允许用户缩放到的最大比例用户是否可以手动缩放忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地一、meta 属性基本含义： content=width=device-width：控制 viewport 的大小,device-width 为设备的宽度 ini...

williamwen1986 2019-08-02 11:08 评论0 收藏0
测试工程师良品 —— Fiddler 工具简介

摘要：可用于拦截某一请求，并重定向到本地的资源，或者使用的内置响应。作为目前最好用的调试工具之一，功能很强大，这里仅做简单介绍，有兴趣的可以深入学习。前言 Fiddler 是目前最强大最好用的调试工具之一，它能记录所有客户端和服务器的http和https请求，设置 CGI 请求的断点，甚至修改输入输出数据。fiddler 的工作原理，是它在 web server 和 web browser...

Crazy_Coder 2019-05-29 17:05 评论0 收藏0