IOS 长按默认事件阻止【坑】

最新推荐文章于 2021-09-09 17:59:56 发布

weixin_34242331

最新推荐文章于 2021-09-09 17:59:56 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发前端 ViewUI

原文链接：http://www.cnblogs.com/trend/p/10678993.html

本文详细介绍了-webkit-touch-callout CSS属性的功能和使用方法，该属性用于控制触摸并长按时是否显示系统默认菜单。文章指出，此属性为WebKit私有属性，主要用于iOS设备上的Safari浏览器，允许开发者禁用或启用链接、图片等元素的默认上下文菜单。

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

概述：

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。

-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

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

说明：

-webkit-touch-callout：behavior

默认值： default

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

取值：

none：

系统默认菜单被禁用

default：

系统默认菜单不被禁用

-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

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

兼容性：

iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确

转载于:https://www.cnblogs.com/trend/p/10678993.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34242331

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【移动端】解决移动端H5 IOS安卓长按弹出拷贝/复制（关闭浏览器的默认长按机制）

lys20000913的博客

04-16

1301

【代码】【移动端】解决移动端H5 IOS安卓长按弹出拷贝/复制（关闭浏览器的默认长按机制）

iOS微信网页长按图片问题解决

peade的博客

05-28

5745

问题环境我手里的测试设备：手机：iphone8, 系统：iOS13.4.1 微信版本：7.0.12 问题一：点按图片，图片浮在屏幕上 iOS系统中，点按图片，图片会浮在屏幕上方，图片下方会出现iOS系统默认的共享等菜单。这种情况，无法实现长按识别问题。解决方法，设置样式，阻止默认行为： img { -webkit-touch-callout: none; } 问题二：长按图片，只有保存，没有识别二维码，发送给好朋友等为解决这个问题，我查看了好多博客文章，最后自己尝试，摸索着解决了。

参与评论您还未登录，请先登录后发表或查看评论

Iphone干掉UITextField的长按、双击等行为时的复制粘贴框

03-22

有的时候我们并不想要UITextField控件在长按或双击等动作时显示复制，粘贴的那个控件，这时就用到了gestureRecognizers这个成员变量。gestureRecognizers里面存放的是textField的行为，我们想要让TextField不响应长按事件时，就可以在这里面找。

手机网页中，长按会触发系统事件，解决办法。

Yang'blog

05-20

1136

在iPhone中只要给长按的div设置两个css，在没有特别定制过的安卓浏览器中也是可以的，但是在小米中就难了，因为小米长按页面中任何地方都会出现一个放大镜： -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none;另外在小米中 window.ontouchstart = function(e) {

H5手机端iOS，安卓长按事件的解决方案

honourable的博客

03-05

5740

之前做手机端游戏的开发，遇到了需要点击事件、长按事件来触发‘上下左右’的场景，由于项目很急(好吧，其实是自己懒)，网上直接搜索插件，痛快，不过提交测试悲剧了，ios非常正常，安卓就不行了，赶紧看了源码，我的天，看不懂，压缩的什么鬼(此处不贴图了)。好吧，还是自己写吧，仔细回想了一下，自己的出发点有问题，点击事件用click事件，长按事件找插件，用类似于longPress之类的api。之后想起来to...

移动端a标签的默认事件

WongRu1的博客

02-07

1052

因为在项目中用到mui 使用ios时，无意间长按a标签会出现如下情况之前一直不知道原因何在，尝试用span标签发现不会出现这个弹框，最后发现是a标签的默认事件造成。在这里给a标签添加如下代码解决 M('body').on('touchstart', 'a.a', function(e) { e.preventDefault(); // 解决a标签长按出现菜单问

iOS 长按事件的解决方法

Laber1314的专栏

09-15

1091

- (id)initWithFrame:(CGRect)frame { UITableView *tmpTblView = [[UITableView alloc] initWithFrame:self.frame]; ....... //实例化长按手势监听 UILongPressGestureRecognizer *longPress =

html5+CSS 实现禁止IOS长按复制粘贴功能

08-31

在移动应用开发中，特别是在iOS平台上，用户长按操作通常会触发系统默认的复制和粘贴功能。然而，有时候开发者需要自定义长按事件来执行特定的功能，这就需要禁用系统的这一默认行为。本文将详细介绍如何通过HTML5和...

阻止浏览器默认行为事件

钱辉

12-15

2822

有时候我们在页面中需要阻止浏览器的默认行为事件,下面是一些简单的示例: created() { this.stopF5Refresh(); }, methods: { stopF5Refresh() { document.onkeydown = function (e) { var evt = window.event || e; var code = evt.keyCode || evt.which; //屏蔽F1.

javascript实现阻止iOS APP中的链接打开Safari浏览器

10-25

5. 使用`event.preventDefault()`阻止浏览器的默认处理方式，然后使用`document.location.href`替换当前页面的URL为链接的URL。这样，页面将在当前Web APP窗口中加载新的URL，而不是跳转到Safari。建议将这段代码...

IOS-如何干掉UITextField的长按手势菜单与输入内容限制

花海的博客

11-13

985

首先要重写UITextFiled子类在初始化方法下面 copy 下面方法就禁止了长按出现的菜单 //干掉textField 的长按菜单禁止copy paste -(BOOL)canPerformAction:(SEL)action withSender:(id)sender { if ([UIMenuController sharedMenuController])

JS开发常用工具函数

hfhan的博客

06-27

486

1、isStatic：检测数据是不是除了symbol外的原始数据 function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || v...

IOS长按事件的方法

最新发布

02-21

<think>嗯，用户问的是关于UniApp移动端的长按点击事件，我需要详细介绍一下。首先，我应该回忆一下UniApp中处理事件的相关知识。UniApp是基于Vue.js的，所以事件处理应该和Vue类似，但可能有自己的扩展。长按事件在移动端比较常见，比如长按弹出菜单或者触发某些特定操作。在UniApp中，应该有一个对应的长按事件，比如`longpress`或者`longtap`。需要确认具体的事件名称，可能不同的平台有不同的表现，但UniApp通常做了封装，统一使用某个事件名。然后，我需要说明如何在组件上绑定这个事件，比如在按钮或者view上使用`@longpress`或者`@longtap`。要给出一个示例代码，展示基本用法，包括事件处理函数的定义和触发方式。另外，可能需要提到事件对象的属性和注意事项，比如阻止默认行为或者事件冒泡。比如在事件处理函数中使用`event.preventDefault()`或者返回`false`，不过需要确认在UniApp中是否支持这些方法。还要考虑不同平台的兼容性问题，比如在iOS和Android上的表现是否一致，是否有需要特别注意的地方。比如某些情况下，长按事件可能会触发系统的默认菜单，这时候需要如何阻止。另外，可能用户需要知道如何区分长按和点击事件，避免同时绑定`@click`和`@longpress`时出现冲突。这时候可以建议在事件处理函数中通过时间阈值来判断，或者使用不同的处理逻辑。还有，可以提到一些实际应用场景，比如长按列表项弹出操作菜单，长按图片保存到相册等，让用户更容易理解如何应用这个功能。最后，是否需要介绍一些高级用法，比如自定义长按时间阈值，或者结合手势库来实现更复杂的效果。不过这可能超出基本介绍的范畴，但可以作为扩展内容简要提及。总结下来，回答的结构应该是：介绍UniApp中的长按事件名称和绑定方式，示例代码，事件对象和注意事项，兼容性问题，区分长按与点击，实际应用场景，以及可能的扩展用法。这样用户能得到全面的信息，满足他们的需求。</think>在 UniApp 中，移动端的长按事件主要通过 `longpress` 事件实现，适用于需要用户长按某个元素触发特定交互的场景（如弹出菜单、预览内容等）。以下是详细介绍和示例： -- ### **1. 绑定长按事件** 在模板中直接使用 `@longpress` 或 `v-on:longpress` 绑定事件： ```html <template> <view @longpress="handleLongPress">长按我</view> <button @longpress="handleButtonLongPress">长按按钮</button> </template> ``` --- ### **2. 事件处理函数** 在 `methods` 中定义对应的处理函数： ```javascript <script> export default { methods: { handleLongPress(event) { console.log('长按触发', event); uni.showToast({ title: '长按成功！' }); }, handleButtonLongPress() { // 执行长按逻辑，如删除操作 } } } </script> ``` --- ### **3. 事件对象参数** 事件对象（`event`）包含以下常用属性： - `type`: 事件类型（如 `longpress`） - `target`: 触发事件的组件属性（如 `id`, `dataset`） - `timestamp`: 事件触发时间戳 - `touches`: 触摸点信息（坐标等） --- ### **4. 注意事项** - **兼容性**：`longpress` 在 iOS 和 Android 上表现一致，但需注意部分安卓机型可能默认有长按菜单（可通过 CSS 禁用）。 - **与点击事件区分**：避免同时绑定 `@click` 和 `@longpress` 时逻辑冲突，可通过延时或状态变量处理。 - **默认行为**：某些组件（如 `<image>`）长按会触发保存图片，需用 `@longpress` 覆盖默认行为。 --- ### **5. 自定义长按时间（高级）** 默认长按阈值约 350ms。如需调整，可通过原生事件模拟： ```html <view @touchstart="startTimer" @touchend="clearTimer" @touchcancel="clearTimer" >自定义长按时间</view> ``` ```javascript <script> export default { data() { return { pressTimer: null } }, methods: { startTimer() { this.pressTimer = setTimeout(() => { console.log('自定义长按触发'); }, 1000); // 设置 1000ms 触发 }, clearTimer() { clearTimeout(this.pressTimer); } } } </script> ``` --- ### **6. 典型应用场景** - 列表项长按删除/编辑 - 长按图片预览或保存 - 聊天消息长按复制/转发 - 游戏中的长按蓄力操作 -- 通过 `@longpress` 可以高效实现移动端的长按交互，建议结合 UniApp 的[官方文档](https://uniapp.dcloud.io/)进一步优化细节。

IOS 长按默认事件阻止 【坑】

概述：

说明：

取值：

兼容性：

IOS 长按默认事件阻止【坑】