-webkit-touch-callout

最新推荐文章于 2025-03-27 08:02:52 发布
转载 最新推荐文章于 2025-03-27 08:02:52 发布 · 2k 阅读 · 0
文章标签：

#-webkit-touch-callou

本文介绍了如何使用CSS的-webkit-touch-callout属性来控制在触摸设备上按住元素时是否显示系统默认菜单。通过设置此属性为'none'，你可以阻止Safari浏览器等应用在触摸操作时弹出额外的菜单，从而提供更纯净的用户体验。

-webkit-touch-callout

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

浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
5. `-webkit-touch-callout: none;`: 在iOS设备上，这个属性可以禁用长按元素时出现的默认菜单，特别适用于图片和链接，以避免用户意外触发不必要的操作。 总结起来，虽然这些CSS3属性具有一定的局限性，主要针对...
-webkit-touch-callout禁止长按菜单
Jour的博客
07-26 6908
微信浏览器如果js中的点击事件，长按会弹出一个javascript提示的菜单栏，有打开和取消两个选项。IOS要取消这一个默认事件，可以在父元素使用-webkit-touch-callout:none;来禁止掉这个菜单弹出。该CSS样式有两个可以取的值：default：此值表示显示默认的callout none：此值表示禁用callout`安卓不支持这个css样式，安卓就直接使用HTML5提出的co
-webkit-tap-highlight-color -webkit-touch-callout
zhanglongdream的博客
01-04 980
-webkit-tap-highlight-color 是一个不规范的属性，他没有出现在css规范的草案中 当用户点击ios的safari浏览器中的链接或js的可点击元素的手，覆盖显示的高亮颜色 该属性可以只设置透明度，如果没有设置透明度，ios 的safari使用默认的 透明度，当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 -webkit-tap-h
webkit-touch-callout webkit- touch-select webkit-text-size-adjust border-collapse
clearclearing的博客
12-05 902
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。(链接元素比如新窗口打开，img元素比如保存图像等等) touch-callout:none： 系统默认菜单被禁用 touch-callout:inherit： 系统默认菜单不被禁用
说说你对-webkit-touch-callout属性的理解
王铁柱666的博客
03-27 576
webkit-touch-callout属性是一个非标准的CSS属性，主要用于iOS系统上的Safari浏览器。这个属性的主要作用是控制当用户触摸并按住某个元素时，是否显示系统默认的菜单。
-webkit-touch-callout，禁止系统默认菜单
weixin_33769207的博客
03-24 1085
2019独角兽企业重金招聘Python工程师标准>>> ...
webkit-touch-callout
05-18
`-webkit-touch-callout`是一个CSS属性，用于控制iOS设备上长按链接或图片时的默认行为。默认情况下，长按链接会显示链接的URL并提示用户可以在新标签页中打开链接，长按图片会显示图片的URL并提示用户可以将其保存...
user-select' is not supported by Safari. Add '-webkit-user-select' to support Safari 3+. -webkit-text-decoration-skip' is not supported by Chrome, Chrome Android, Edge, Firefox.出现这些在呢么解决
07-24
-webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` **场景：** 下划线紧贴...
.mobile-carousel { width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; margin: 0; padding: 0; z-index: 1000; touch-action: pan-y; background: #000; } .slides { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); /* 更顺滑的缓动函数 */ } .slide { flex: 0 0 100vw; /* 宽度精确匹配视口 / position: relative; height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; / 包含内边距 */ } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; /* 防止长按菜单 */ pointer-events: none; -webkit-touch-callout: none; } .slide-hint { position: absolute; bottom: calc(10vh + env(safe-area-inset-bottom)); /* 避开底部安全区域 / right: max(5vw, env(safe-area-inset-right)); / 适配刘海屏 / background: rgba(0,0,0,0.75); color: #fff; padding: 12px 20px; border-radius: 30px; font-size: 16px; animation: hintPulse 1.5s infinite; backdrop-filter: blur(4px); / 毛玻璃效果 */ z-index: 10; font-weight: 500; } @keyframes hintPulse { 0% { opacity: 0.7; transform: translateX(0) scale(0.98); } 50% { opacity: 1; transform: translateX(-8px) scale(1.03); } 100% { opacity: 0.7; transform: translateX(0) scale(0.98); } } /* 全面屏适配 / @media screen and (max-aspect-ratio: 9/16) { .slide img { object-fit: contain; / 超长屏使用contain模式 */ } } /* 禁用iOS橡皮筋效果 */ body { overscroll-behavior: none; } 为什么屏幕顶部和底部会有一块黑色背景区域 我希望有这个区域 我希望图片占据整个屏幕，并且希望有安全区域
最新发布
09-21
-webkit-touch-callout: none; } /* 提示框优化 */ .slide-hint { position: absolute; bottom: calc(10vh + env(safe-area-inset-bottom)); right: max(5vw, env(safe-area-inset-right)); background: rgba...
.mobile-carousel { width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; margin: 0; padding: 0; z-index: 1000; touch-action: pan-y; background: #000; } .slides { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); /* 更顺滑的缓动函数 */ } .slide { flex: 0 0 100vw; /* 宽度精确匹配视口 */ position: relative; height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; /* 包含内边距 */ } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; /* 防止长按菜单 */ pointer-events: none; -webkit-touch-callout: none; } .slide-hint { position: absolute; bottom: calc(10vh + env(safe-area-inset-bottom)); /* 避开底部安全区域 */ right: max(5vw, env(safe-area-inset-right)); /* 适配刘海屏 */ background: rgba(0,0,0,0.75); color: #fff; padding: 12px 20px; border-radius: 30px; font-size: 16px; animation: hintPulse 1.5s infinite; backdrop-filter: blur(4px); /* 毛玻璃效果 */ z-index: 10; font-weight: 500; } @keyframes hintPulse { 0% { opacity: 0.7; transform: translateX(0) scale(0.98); } 50% { opacity: 1; transform: translateX(-8px) scale(1.03); } 100% { opacity: 0.7; transform: translateX(0) scale(0.98); } } /* 全面屏适配 */ @media screen and (max-aspect-ratio: 9/16) { .slide img { object-fit: contain; /* 超长屏使用contain模式 */ } } /* 禁用iOS橡皮筋效果 */ body { overscroll-behavior: none; } 为什么屏幕顶部和底部会有一块黑色背景区域 我希望有这个区域 我希望图片占据整个屏幕
09-21
-webkit-touch-callout: none; } /* 其他样式保持不变 */ .slide-hint { position: absolute; bottom: calc(10vh + env(safe-area-inset-bottom)); /* 避开底部安全区域 */ right: max(5vw, env(safe-area-...
-webkit-touch-callout 禁止长按链接与图片弹出菜单
咖喱鸡块的博客
03-31 3542
-webkit-touch-callout 禁止长按链接与图片弹出菜单 -webkit-touch-callout: none;
-webkit-touch-callout: none；禁止ios弹出菜单，长按图片保存到手机时
cd13849109771的博客
10-25 2385
-webkit-touch-callout: none;禁止ios弹出菜单，长按图片保存到手机时 有一个需求就是h5页面中，长按二维码图片，保存到手机；在ios上经常长按会弹出ios的菜单，而无法每次都能够进行保存到手机的操作。真是超级烦啊！！！ 解决办法：给图片img添加-webkit-touch-callout: none; img{ width: 100%; -webkit-touch-callout: none; } ...
html5移动端实现禁止长按图片保存:
SunPeng的博客
10-31 1946
html5移动端实现禁止长按图片保存:
html表格中怎么拖动选择,javascript – 在html表格单元格上拖动
weixin_33389310的博客
06-04 274
jsFiddle更新：http://jsfiddle.net/qvxBb/2/禁用正常选择,如下所示：.myselect {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: moz-none;-ms-user-select: none;user-selec...
css（笔记01）
kilito_01的博客
04-23 259
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
移动端常见bug（5）
xxy77721的博客
09-27 526
1、长时间按住页面出现闪退 ? 1 2 3 element {   -webkit-touch-callout: none; } 2、iphone及ipad下输入框默认内阴影 ? 1 2 3 Elemen
移动端事件介绍
weixin_33923148的博客
02-21 191
移动端事件介绍 阅读目录 一：理解click的300ms的延迟响应 二：手势事件的介绍 三：触摸事件的介绍 四：基本知识点 1.判断是否为iPhone 2.自动大写与自动修正 3.禁止 iOS 弹出各种操作窗口 4. 禁止用户选中文字 5. 关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格 6. Andriod 上去掉语音输入按钮 ...
11.移动端注意事项
samllucky的博客
01-11 393
确定技术选型：方案：单独制作移动页面方案 技术：布局采取流式布局 题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net 1.视口（选择理想视口）：设备有多宽，布局视口有多宽 meta视口标签标准设置： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-s...
IOS微信端touchstart事件失效处理
qq_38847917的博客
09-19 3543
IOS微信端touchstart（长按）事件失效，点击的时候还总是弹出检索条 *{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-selec...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值