阻止长按手机屏幕出现的选中事件

最新推荐文章于 2022-10-01 10:37:54 发布

马娟

最新推荐文章于 2022-10-01 10:37:54 发布

阅读量717

点赞数 1

分类专栏： css样式 app端 pc端

本文链接：https://blog.csdn.net/weixin_41077029/article/details/83013171

版权

css样式同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

app端

4 篇文章 0 订阅

订阅专栏

pc端

1 篇文章 0 订阅

订阅专栏

此方法主要是阻止手机端长按或pc端点击后出现的选中事件

1.pc端

body{ 
  -webkit-user-select:none;
  -moz-user-select:none; 
  -ms-user-select:none; 
  user-select:none;
}

2.app端

此处的.react-cover为需要阻止选中的元素

body .react-cover {
  -webkit-user-select: none; 
  user-select: none; 
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

马娟

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案

王佳斌

02-16

5172

微信公众号网页H5禁用长按弹出的菜单，uniapp vue项目 H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，react vue uniapp 网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号 - 禁用

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

peade的博客

05-28

5109

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

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

手机网页取消长按事件

小小黑

09-21

6604

有两种实现方法： 1.如果针对某个特定的div，那么修改样式即可： -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 2.如果对于整个页面，那么添加如下js代码： window.ontouchstart = function(e) { e.preventDefault(); };

css 禁止手机选中,移动端-禁止长按选中文本

weixin_42358827的博客

08-04

1576

最近在项目中遇到了需要长按选中礼物码的东西，需要把礼物码旁边的文本禁止掉，查了资料，发现了两种方法可以禁止。css方法：.no-touch {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-...

移动端页面禁用长按选中功能

ZT的专栏

11-23

3299

在页面的head里面填写如下内容：

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

weixin_43088792的博客

11-19

2423

概述 -webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。 -webkit-touch-callout: default /* displays the callout */ -webkit-touch-callout: none /* di

Javascript React 手机上的右键点击（长按）事件

一朵小呆毛

04-05

2324

前戏：开会不准玩电脑，只能玩手机，玩儿了阵子扫雷，决定自己做一个网页版。三下五除二做完之后，猛然发现，手机没有右键。。。。。。没有右键怎么插小红旗？！想起来app上是用长按来插小红旗的，于是开始了长达几个小时的纠结。最开始的时候，格子接受左键和右键点击不同的event。 onClick用来监听左键点击，onContextMenu用来监听右键点击，可以愉快的玩耍，么得问题的。 import ...

listview综合使用示例_结合数据库操作和listitem单击长按等事件

05-05

// 在这里处理长按事件，返回true表示已处理，阻止其他默认行为 return true; } }); ``` 为了填充ListView，我们需要一个适配器（Adapter）。适配器是连接数据源和ListView的桥梁，它负责将数据转化为ListView能...

ios 中 h5 如何长按选中文本后不弹出系统弹窗使用 css的方式不生效

06-06

// 阻止长按事件弹出系统菜单 event.preventDefault(); }, false); ``` 上述代码会给根元素添加一个 `touchstart` 的监听器，当用户长按屏幕时，会阻止默认的长按事件，从而禁用长按弹出菜单。请注意，这种方法只...

html拖拽调图片顺序,关于H5实现微信长按图片拖动调整顺序

weixin_36106852的博客

06-07

1171

当你明白功能的实现逻辑的时候，往往实现的过程中会给你带来惊喜，所以先去明确功能的实现逻辑，剩下的事情会水到渠成比如这个功能，开始的时候我是这样想的，第一张图片的左侧中点作为左侧触发边界点，右侧中点作为右侧触发边界点，当第一张图片的右侧边界点拖动到第二张图片的右半部分时，将第二张图片移动到左边，并交换两张图片的index和位置。当第二张图片的左侧边界点拖动到第一张图片的左半部分时，将第一张图片移动到...

h5页面在ios机上禁止长按复制

react打断点调试

07-21

2615

ios机默认存在长按复制选择，用以下代码取消： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none;...

React识别长按操作

u011588551的博客

07-27

7908

定时器仍会保留一个数字值，需要手动清零。 React分别设置绑定onTouchStart() onTouchMove() onTouchEnd()实现长按识别 onTouchStart(){ this.timeOutEvent = setTimeout(function() { this.timeOutEvent = 0; ...

如何在移动端web端禁止长按选择文字以及弹出菜单

itclanCoder

10-01

3587

在做移动端页面时,当用户用手机打开网站,当在上面用手指进行一些用户操作时如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢，用css几行代码就可以解决/*如果是禁用长按选择文字功能，用css*/ *{ -webkit-touch-callout:none; -webkit-...

移动端长按禁止默认事件总结

Kris的博客

07-06

5767

1、如果是禁用长按选择文字功能，用 css : 全局* 或者局部选择相映的DOM加 * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -m...

禁用长按事件

执生的博客

09-20

1839

/*如果是禁用长按选择文字功能，用css*/* { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}// 如果是想禁用长按弹出菜单, 用jswindow.addE...

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

weixin_34242331的博客

04-09

1639

概述：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 -webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。说明： -webkit-...

Android webview屏蔽长按事件

Ueming的博客

12-13

7513

要禁用长按事件，需要先设置webview.setLongClickable(true)，再给webview添加长按监听事件，不做任何操作。代码如下： webview.setLongClickable(true); webview.setOnLongClickListener(new OnLongClickListener() { @Override public boolean...

触屏手机端阻止长按弹出选择文字以及弹出菜单，img标签同理

hangGe0111的博客

08-09

3815

1.主要代码（1）css /*触屏手机端阻止长按弹出选择文字以及弹出菜单*/ *{ /*阻止文本选中*/ -webkit-user-select: none; user-select: none; /*阻止菜单弹出*/ -webkit-touch-callout: none; /*touch-callout去掉，安卓不支持须通过js里的阻止默认事件实现*/ ...

uniapp阻止长按事件