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

最新推荐文章于 2023-03-22 14:24:35 发布
原创 最新推荐文章于 2023-03-22 14:24:35 发布 · 822 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS阻止网页在PC端和移动端的选中事件，通过设置user-select属性来禁用文本和元素的选取，适用于提高网页交互体验。
部署运行你感兴趣的模型镜像

此方法主要是阻止手机端长按或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; 
}

 

您可能感兴趣的与本文相关的镜像

Langchain-Chatchat

Langchain-Chatchat

AI应用
Langchain

Langchain-Chatchat 是一个基于 ChatGLM 等大语言模型和 Langchain 应用框架实现的开源项目，旨在构建一个可以离线部署的本地知识库问答系统。它通过检索增强生成 (RAG) 的方法，让用户能够以自然语言与本地文件、数据库或搜索引擎进行交互，并支持多种大模型和向量数据库的集成，以及提供 WebUI 和 API 服务

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案
🏆 前端领域优质创作者
02-16 6158
微信公众号网页H5禁用长按弹出的菜单，uniappvue项目H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，reactvueuniapp网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号-禁用
【移动端】解决移动端H5 IOS安卓 长按弹出拷贝/复制（关闭浏览器的默认长按机制）
最新发布
lys20000913的博客
04-16 1495
【代码】【移动端】解决移动端H5 IOS安卓 长按弹出拷贝/复制（关闭浏览器的默认长按机制）
手机网页取消长按事件
小小黑
09-21 6728
有两种实现方法： 1.如果针对某个特定的div，那么修改样式即可： -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 2.如果对于整个页面，那么添加如下js代码： window.ontouchstart = function(e) { e.preventDefault(); };
css 禁止手机选中,移动端-禁止长按选中文本
weixin_42358827的博客
08-04 1880
最近在项目中遇到了需要长按选中礼物码的东西，需要把礼物码旁边的文本禁止掉，查了资料，发现了两种方法可以禁止。css方法：.no-touch {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-...
【前端】禁用移动浏览器长按默认事件
weixin_38792911的博客
09-17 4788
转载：H5移动端禁止长按弹出系统菜单"选择复制",“在浏览器打开” 移动端长按事件自定义的时候会和各种浏览器自带的长按默认事件冲突，所以禁止掉浏览器自带的长按事件 *{ -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早起浏览器*/ -moz-user-select:none;/*火狐浏览器*/ -ms-user-select:none
移动端页面禁用长按选中功能
ZT的专栏
11-23 3553
在页面的head里面填写如下内容： <!-- * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -->
【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
公众号@极客密码
01-16 1574
常规项目，我们只需要给标签加一个onselectstart事件，return false就可以 例： &amp;lt;div onselectstart=&quot;return false;&quot; &amp;gt;&amp;lt;/div&amp;gt; 但是在React中，是没有onselectstart事件的 我们只需要给标签添加个样式就可以了。 .node{/*node为标签的class名*/ -webkit-user-sele...
listview综合使用示例_结合数据库操作和listitem单击长按等事件
05-05
// 在这里处理长按事件，返回true表示已处理，阻止其他默认行为 return true; } }); ``` 为了填充ListView，我们需要一个适配器（Adapter）。适配器是连接数据源和ListView的桥梁，它负责将数据转化为ListView能...
禁用长按事件的CSS与JavaScript方法
首先，从标题来看，“禁用长按事件方法”明确指出了本文的核心技术主题——如何在网页或移动应用界面中阻止用户通过长按屏幕触发默认行为。这类需求常见于需要防止文本被选中、图片被保存、菜单弹出等场景，例如在线...
ios 中 h5 如何长按选中文本后不弹出系统弹窗 使用 css的方式不生效
06-06
// 阻止长按事件弹出系统菜单 event.preventDefault(); }, false); ``` 上述代码会给根元素添加一个 `touchstart` 的监听器，当用户长按屏幕时，会阻止默认的长按事件，从而禁用长按弹出菜单。请注意，这种方法只...
记录有关H5在页面按下会选择文字解决方案
chentianchengBUG的博客
03-22 832
/阻止选择开始默认事件。以上仅本人安卓手机测试（有好心人的话也可以送我一台苹果测测）手机自带浏览器、钉钉、微信浏览器皆实现基本需求故而记录此博客，由于踩坑过多才写。1.要求网站M站的页面在手机浏览器打开时翻页滚动时总会选中中文字提示复制，用户体验不好，故而要求前端实现下按不会弹出选择复制的情况。以上经过测试仅使微信、 钉钉、以及ios系统打开的页面不会选择文字，浏览器还是会出现选择文字情况。
h5 安卓/IOS长按图片、文字禁止选中或弹出系统菜单 的解决方法
03-14 2371
最近在做IM的语音功能，发现当长按录音的时候手机会弹出来系统菜单，IOS下bug形式：1）长按的标签设置为css background的形式：不会弹出菜单；2）但是当设置为img时，系统默认识别为保存图片的行为，因而会产生以下系统菜单：　　　　　　　3） 当前标签为纯文字时，会弹出选中文字的系统菜单；安卓的bug形式如下： 　　1）当设置为css的background形式时候，系统默认...
react中禁止复制的写法
qq_29854831的博客
02-27 3083
&lt;div onCopy={(e) =&gt; e.preventDefault()}&gt; 这一段文字禁止被复制 &lt;/div&gt;此方式能实现局部禁止复制这里介绍的是个人觉的最好的一种方式，原理是禁止复制这个方法调用。此外，你还可以从css的角度去解决，代码如下:&lt;div className="test"&gt; 这一段文字禁止被复制 &lt;/div&gt; css:.t...
2021-08-17 阻止IOS长按默认事件
weixin_43088792的博客
11-19 2670
概述 -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 2475
前戏： 开会不准玩电脑，只能玩手机，玩儿了阵子扫雷，决定自己做一个网页版。三下五除二做完之后，猛然发现，手机没有右键。。。。。。没有右键怎么插小红旗？！ 想起来app上是用长按来插小红旗的，于是开始了长达几个小时的纠结。 最开始的时候，格子接受左键和右键点击不同的event。 onClick用来监听左键点击，onContextMenu用来监听右键点击，可以愉快的玩耍，么得问题的。 import ...
h5页面在ios机上禁止长按复制
react打断点调试
07-21 2718
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 8084
​定时器仍会保留一个数字值，需要手动清零。 React分别设置绑定onTouchStart() onTouchMove() onTouchEnd()实现长按识别 onTouchStart(){ this.timeOutEvent = setTimeout(function() { this.timeOutEvent = 0; ...
移动端长按禁止默认事件总结
Kris的博客
07-06 6094
1、如果是禁用长按选择文字功能，用 css : 全局* 或者 局部选择相映的DOM加 * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值