2021-08-17 阻止IOS长按默认事件

最新推荐文章于 2024-05-08 13:24:57 发布
最新推荐文章于 2024-05-08 13:24:57 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： min-ui  vant 前端框架 文章标签： javascript ios web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43088792/article/details/121419320
版权

概述

-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。

当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。

-webkit-touch-callout: default   /* displays the callout */
-webkit-touch-callout: none      /* disables the callout */

-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset

app项目上要实现长按图标能实现动态的增减功能，ios上有长按的默认事件，-webkit-touch-callout: none 在目标区域添加上这个css属性可以阻止ios的默认事件 在测试环境中亲测有效

不想写css的前端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+CSS 实现禁止IOS长按复制粘贴功能
08-31
因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧
javascript实现阻止iOS APP中的链接打开Safari浏览器
10-25
5. 使用`event.preventDefault()`阻止浏览器的默认处理方式，然后使用`document.location.href`替换当前页面的URL为链接的URL。这样，页面将在当前Web APP窗口中加载新的URL，而不是跳转到Safari。 建议将这段代码...
阻止事件冒泡
csdncsdn9876的博客
06-05 300
跨浏览器解决方法                                function showMessage(event){             alert(event.target.nodeName);             event.stopPropagation();         }         function showBox
vue使用自定义指令实现长按事件（适用于h5，pc）
最新发布
wangxiaoyanlike的博客
05-08 903
/ 自定义指令长按触发回调函数// 定义变量// 创建计时器（ 2秒后执行函数 ）== 0) {return}, 1000)// 取消计时器== null) {// 运行函数// 传递item参数// 添加事件监听器el.addEventListener('touchstart', start)//在移动端要考虑 touchstart，touchend 事件// 取消计时器。
IOS禁用UIWebView的默认行为
半 饱(half-full,half-replete) 开发专栏
12-22 1208
概要         UIKit提供UIWebView组件，允许开发者在App中嵌入Web页面。通过UIWebView组件可以在应用中很方便的嵌入HTML页面。当在加载的页面中可能会出现一些默认的效果，这种效果与移动浏览器效果差不多，有的时候我们并不希望出现这样的效果，在开发html时就需要注意以下的交互行为。  常见交互行为 1､长按文字区域进显示文字放大镜，选择指定区域的网页内容，包
ios中嵌套h5做的app，长按图片默认会有放大效果；如何禁止
Ytwinklestar的博客
08-19 3159
ios中嵌套h5做的app，长按图片默认会有放大效果；如何禁止：img { -webkit-touch-callout: none; }；只需要添加这个属性
【前端】禁用移动浏览器长按默认事件
weixin_38792911的博客
09-17 3849
转载：H5移动端禁止长按弹出系统菜单"选择复制",“在浏览器打开” 移动端长按事件自定义的时候会和各种浏览器自带的长按默认事件冲突，所以禁止掉浏览器自带的长按事件 *{ -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早起浏览器*/ -moz-user-select:none;/*火狐浏览器*/ -ms-user-select:none
手机h5页面长按复制完整代码
04-28
在iOS和Android系统中，长按事件通常用于触发上下文菜单，但默认情况下并不包括复制功能。 要实现长按复制功能，我们需要监听`touchstart`、`touchend`和`contextmenu`等触摸事件。当用户在目标元素上长按时，我们...
iOS UIWebView实现禁止用户复制剪切功能
09-01
但请注意，这种方法仅能防止用户通过系统菜单（长按弹出的选项）进行复制和剪切，无法阻止用户使用其他方式（如辅助触控或快捷键）来操作文本。 此外，如果你的HTML页面包含JavaScript代码，你还可以在JavaScript...
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
`: 在iOS设备上，这个属性可以禁用长按元素时出现的默认菜单，特别适用于图片和链接，以避免用户意外触发不必要的操作。 总结起来，虽然这些CSS3属性具有一定的局限性，主要针对WebKit浏览器和iOS设备，但在移动...
h5页面在ios机上禁止长按复制
weixin_45115895的博客
01-21 804
场景：H5长按事件，需要禁止IOS默认的长按复制 用以下代码取消： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } // 但是以上代码也会禁止输入
移动端长按禁止默认事件总结
caixiajia的专栏
08-28 2367
转：https://blog.csdn.net/webKris/article/details/80942773 1、如果是禁用长按选择文字功能，用 css : （这种方法已尝试，可行） 全局* 或者 局部选择相映的DOM加 * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select...
webkit-touch-callout webkit- touch-select webkit-text-size-adjust border-collapse
clearclearing的博客
12-05 765
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。(链接元素比如新窗口打开，img元素比如保存图像等等) touch-callout:none： 系统默认菜单被禁用 touch-callout:inherit： 系统默认菜单不被禁用
关于移动端踩过的坑
mr_fzz的博客
07-31 1500
1.ios与android的标签表现不一致的问题ios和android的select标签还有input[type=”button”]在真机上的样式会有区别，所以我们可以加上这一条css来消除ios和android的样式差别：-webkit-appearance: none;2.ios上不支持new Date(yyyy-mm-dd)这个坑真的把我坑惨了，找了半天才找到这个原因，ios上你如果new D
11.移动端注意事项
samllucky的博客
01-11 319
确定技术选型：方案：单独制作移动页面方案 技术：布局采取流式布局 题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net 1.视口（选择理想视口）：设备有多宽，布局视口有多宽 meta视口标签标准设置： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-s...
ios禁止长按触发系统菜单，下载图片，用户选中文字
HuaCHen_SHan的博客
07-17 668
ios禁止长按触发系统菜单，下载图片，用户选中文字
vue长按事件
qq_42396791的博客
02-12 3186
 html &lt;template&gt; &lt;div&gt; &lt;div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)"&gt;长按事件&lt;/div&gt; &lt;/div&amp
css禁止界面选中文字 无效,css实现禁止页面文字被选中功能
weixin_32040059的博客
08-04 489
通过css实现页面文字不能被选中(推荐教程：CSS教程).cannotselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}css介绍user-select说明控制选取能否被选择.该特性是非标准的，请尽...
每天一剂 WebView 良药
热门推荐
zhangxin09的专栏
04-02 1万+
是为记

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值