介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color

最新推荐文章于 2025-03-27 08:02:52 发布
转载 最新推荐文章于 2025-03-27 08:02:52 发布 · 382 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/rhett-web/p/4931521.html
文章标签：

#javascript #ViewUI

本文介绍了两个WebKit私有属性：-webkit-touch-callout用于控制触摸并按住元素时的默认行为；-webkit-tap-highlight-color则用于覆盖点击元素时的高亮颜色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color

 

-webkit-touch-callout

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

具体查看http://www.css88.com/webkit/-webkit-touch-callout/

 

-webkit-tap-highlight-color 

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

具体查看http://www.css88.com/webkit/-webkit-tap-highlight-color/

posted on 2015-11-02 21:49 Rhett_Web 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/rhett-web/p/4931521.html

D_SJ
关注
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1401
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
同行兄弟出去面试题的汇总 2020-7-19
weixin_48116269的博客
10-20 767
1.普通数据类型 (1)普通数据类型有哪些? ​ 字符串型string： 数值型number,：undefined：null,：布尔型boolean 复杂数据类型有Object Array Date (2如何检测类型? console.log(typeof data) instanceof Array.isArry() (3如何转换数据类型? 转字符串 ​ 数据.toString() ​ String(数据) ​ 隐式转换:数据+’ ’ Join(‘分割符’) 转数值 Number必须是纯数字(数据)
两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color
amber_2016的博客
12-28 479
在ios系统中，有些默认的样式需要特定的处理，例如具有背景图片的按钮按下时有默认的透明度，看看下面这个解释有没有帮助 www.css88.com/webkit/-webkit-tap-highlight-color/ 转载于:https://www.cnblogs.com/wjh0916/p/5083320.html...
-webkit-tap-highlight-color -webkit-touch-callout
zhanglongdream的博客
01-04 949
-webkit-tap-highlight-color 是一个不规范的属性，他没有出现在css规范的草案中 当用户点击ios的safari浏览器中的链接或js的可点击元素的手，覆盖显示的高亮颜色 该属性可以只设置透明度，如果没有设置透明度，ios 的safari使用默认的 透明度，当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 -webkit-tap-h
css3 三个属性：-webkit-tap-highlight-color，-webkit-touch-callout，-webkit-user-select
weixin_30642561的博客
09-08 196
去除 a标签点击出现透明背景： -webkit-tap-highlight-color: transparent; 关闭 a标签系统自动菜单： -webkit-touch-callout: none;关闭双击选择文本： -webkit-user-select: none; 转载于:https://www.cnblogs.com/damade/p/5853072.html...
-webkit-touch-callout禁止长按菜单
Jour的博客
07-26 6863
微信浏览器如果js中的点击事件，长按会弹出一个javascript提示的菜单栏，有打开和取消两个选项。IOS要取消这一个默认事件，可以在父元素使用-webkit-touch-callout:none;来禁止掉这个菜单弹出。该CSS样式有两个可以取的值：default：此值表示显示默认的callout none：此值表示禁用callout`安卓不支持这个css样式，安卓就直接使用HTML5提出的co
说说你对-webkit-touch-callout属性的理解
最新发布
王铁柱666的博客
03-27 469
webkit-touch-callout属性是一个非标准的CSS属性，主要用于iOS系统上的Safari浏览器。这个属性的主要作用是控制当用户触摸并按住某个元素时，是否显示系统默认的菜单。
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
需要注意的是，`-webkit-tap-highlight-color`属性是WebKit私有的，这意味着它只在基于WebKit的浏览器（如Safari和Chrome）中生效，尤其是针对iOS设备。在其他浏览器中，可能需要寻找其他方法来实现相同的效果。 接...
CSS3---移动端苹果安卓适配
weixin_45343884的博客
09-20 1870
常见苹果适配问题： 【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面 ♥♥♥方案：<meta name="format-detection" content="telephone=no" /> 【问题2】微信浏览器自动调整页面字体大小 ♥♥♥方案：禁止微信浏览器调整页面字体大小: body{ -webkit-text-size-adjust...
一些鲜为人知的的CSS3属性
_
02-04 940
webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例：设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持: 只有iO
-webkit-touch-callout 禁止长按链接与图片弹出菜单
咖喱鸡块的博客
03-31 3526
-webkit-touch-callout 禁止长按链接与图片弹出菜单 -webkit-touch-callout: none;
webkit-touch-callout webkit- touch-select webkit-text-size-adjust border-collapse
clearclearing的博客
12-05 875
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。(链接元素比如新窗口打开，img元素比如保存图像等等) touch-callout:none： 系统默认菜单被禁用 touch-callout:inherit： 系统默认菜单不被禁用
css（笔记01）
kilito_01的博客
04-23 209
1.box-shadow：通常还需要写-webkit-box-shadow和-moz-box-shadow 2.background中的rgba属性：通常还需要写filter 3.transition：通常还需要写-o-transition和-webkit-transition 4.input::placeholder：通常还需要写input::-moz-placeholder和input::-webkit-input-placeholder和 input:-ms-input-placeholder 5.a
-webkit-touch-callout: none；禁止ios弹出菜单，长按图片保存到手机时
cd13849109771的博客
10-25 2348
-webkit-touch-callout: none;禁止ios弹出菜单，长按图片保存到手机时 有一个需求就是h5页面中，长按二维码图片，保存到手机；在ios上经常长按会弹出ios的菜单，而无法每次都能够进行保存到手机的操作。真是超级烦啊！！！ 解决办法：给图片img添加-webkit-touch-callout: none; img{ width: 100%; -webkit-touch-callout: none; } ...
移动端兼容性问题解决方案
weixin_34099526的博客
03-07 449
1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器...
-webkit-touch-callout
SmallCode的今天
11-12 2017
-webkit-touch-callout 当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
web前端领域移动端自定义长按事件你用过吗？
qq_19891827的博客
03-05 4275
一。在移动端开发过程中经常会用到长按事件，例如游戏中人物，长按上下左右会持续移动人物的位置，这是一个典型的长按事件的需求，但javaScript原生不支持长按事件，这就需要我们自定义一个长按事件以满足我们的需求。1.由于移动端长按元素会触发许多默认行为，所以第一步我们要禁掉这些默认行为，css代码如下。body { -webkit-touch-callout: none !important...
手机网页如何取消常按选中功能和touchstart后不能触发touchend事件
sly94的博客
08-04 4488
/**禁用长按选中文本功能 start*/ * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } /**禁用长按选中文本
-webkit-overflow-scrolling:touch介绍和碰到的坑
weixin_34388207的博客
06-27 1217
1.作用 可控制元素在移动设备有滚动回弹效果，可惯性滚动 2.适应场景 在ios移动端上，设置容器overflow-y:scroll;使容器内元素滚动时，滑动会很卡顿，使用-webkit-overflow-scrolling:touch;可以解决该问题。 原理：该属性开启了硬件加速 缺点：耗内存 3.引发的bug（仅ios） ...
webkit-touch-callout
05-18
`-webkit-touch-callout`是一个CSS属性，用于控制iOS设备上长按链接或图片时的默认行为。默认情况下，长按链接会显示链接的URL并提示用户可以在新标签页中打开链接，长按图片会显示图片的URL并提示用户可以将其保存...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值