better-scroll插件阻止长按选中文本？使用preventDefault参数配置

最新推荐文章于 2024-01-10 23:28:34 发布
最新推荐文章于 2024-01-10 23:28:34 发布
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a592522245/article/details/99656663
在使用BetterScroll插件的web移动端项目中，遇到手机上长按文字无法选中的问题。本文介绍了解决方案，即调整preventDefault设置并修改CSS的user-select属性，确保文字可被选中。

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

最近有个web移动端项目用到better-scroll插件，发现在手机上长按文字不能选中。一开始通过设置user-select: text，但没有效果，于是看了下文档。

原来是插件阻止了浏览器默认行为，将preventDefault设置为false，并设置css的user-select属性：

 

{  -webkit-user-select:text;  -moz-user-select:text;  -o-user-select:text;  user-select:text;}

​

Vue中使用better-scroll插件实现移动端字母侧边导航滚动条（包括列表按首字母排序、点击导航跳转位置）完整实现
weixin_43185419的博客
08-30 1909
实现效果如上图所示。 首先引入better-scroll的组件： 1、npm安装better-scroll插件。npm install–save better-scroll 2、在文件中引入better-scroll。import BScroll from ‘better-scroll’; 排序使用的是pinyin的包，将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。 1、安装方式： npm install pinyin 2、在应用的.vue文件中单独引入 var pi.
better-scroll 中的img标签无法触发长按保存菜单
CT2015的博客
11-05 445
better-scroll 默认禁用的多数标签的默认行为，启用默认行为需加如下属性 preventDefaultException:{ tagName: /^(IMG|INPUT|TEXTAREA|BUTTON|SELECT)$/ } 转载于:https://www.cnblogs.com/yueqian-jmy/p/9907499.html...
iScroll左右滑动的时候，阻止了内容的上下滑动 e.preventDefault() 解决办法
小郭书房
04-24 5874
很不错的一个框架！不过此框架会阻止浏览器的默认行为，如左右滑动的时候，这个时候会阻止上下滑动 这样对很多文章内容页相对较长的页面显然不适用，修改如下 1:在onBeforeScrollStart: function (e) { e.preventDefault(); }, 修改为onBeforeScrollStart: null, 2:在_move方法里增加（大小可根据需要自行修
better-scroll不能滚动之 滚动监听-左右联动
weixin_34204722的博客
12-29 1413
滚动监听 better-scroll 无法滚动的分析，直接翻到最后，看问题汇总，希望能帮助你解决。 　　借用一下人家这个好看的项目图片，做一个解释。左边的内容会跟右边的内容一起关联，点击左边的菜单，右边会滚动到对应菜单的内容区域；滚动右边的内容，左边会滚动到对应的菜单项。 就是这个简单的左右关联的项目。方法提供了两个。 jq的方法： 定义...
better-scroll Ignored attempt to cancel a touchend event with cancelable=false, for example becaus
zhaohanqq的博客
05-16 2122
使用better-scroll在安卓上有以下问题 当页面在滑动中，然后去点击better-scroll，会报 Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. at bsc...
页面滑动插件 better-scroll 的简单使用 点击字母跳转对应汉字区块
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
07-09 432
首先安装 better-scroll better-scroll 托管在 Npm 上，执行如下命令安装： npm install better-scroll --save 接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码： import BScroll from 'better-scroll' 如果是 ES5 的语法，如下： var BScroll = require('better-scroll') 要实现的功能： 当下方文字滑动时 顶部“城
vue better-scroll插件使用详解
08-28
vue better-scroll插件使用详解 本篇文章主要介绍了vue better-scroll插件的使用详解，better-scroll是一个移动端滚动的解决方案，它基于iscroll的重写，具有强大的功能，可以实现普通的滚动列表、轮播图、picker...
vue使用better-scroll实现菜单列表左右联动
07-13
而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者浏览器上实现高性能、易用的滚动效果。在本篇文章中，我们将深入探讨如何在 Vue 项目中利用 Better-Scroll 实现菜单列表的左右联动功能。 ...
Angular中使用better-scroll插件的方法
08-27
Angular中使用better-scroll插件的方法 Better-scroll是一个非常流行的滚动插件，Angular框架中使用better-scroll插件可以实现非常流畅的滚动体验。下面将详细介绍Angular中使用better-scroll插件的方法。 首先，...
详解 vue better-scroll滚动插件排坑
08-28
vue better-scroll 滚动插件详解 BetterScroll 是一款移动端滚动插件，它的强大之处是解决移动端（已支持 PC）各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 ...
解决Better Scroll滚动条不能点击元素事件失效问题
sensendedede的博客
01-10 691
用BetterScroll做文章列表滚动容器会发生文章里的文字选中不可用，文章上的事件点击等等被禁用等问题。
Vue.js学习笔记
jiaweihaoku的博客
01-30 433
1.better-scroll导致 伪类失效 设置 better-scroll的preventDefault属性为false即可； this.menuScroll=new Bscroll(this.$refs.my,{click:true,preventDefault:false});2，自定义vue组件点击事件需要用@click.native="xxx"才会生效
better-scroll的用法，及其中的一个属性event._constructed详解
weixin_30819085的博客
07-19 279
better-scroll是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。 实现原理：父容器固定高度，并设置overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。 立即使用： <body> <div id="wrapper"> <ul> <li&gt...
betterscroll使用总结
little_kid_pea的博客
02-20 909
1、滚动满足的必要条件 所有需要滚动的元素需要被两个div包起来，第一个是wrapper，第二个是content wrapper的高度固定，而content需要高度比wrapper大，content是wrapper唯一的子节点 所有需要滚动的元素列表放入content中 2、使用betterscroll以后，某些输入型元素事件失效 以elememt-ui的组件el-autocomplet...
知识点：阻止scroll事件
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
08-23 1万+
面试的时候被问道怎么取消一个事件的默认行为，当然是用event.preventDefault()了。 但是怎么屏蔽页面的滚动？这里event.preventDefault()不起作用，原因就是scroll事件属于UI事件，而UI事件一般是不能够取消默认行为的。UI事件包括： load、unload abort error select resize scroll 为这类事件绑定事件处理函数，只会在
禁用滚动事件和取消鼠标右键默认事件
weixin_42380440的博客
04-20 417
禁用滚动条 在需要限制滚动条滚动的dom上绑定onmousewheel 事件，代码如下： scrollFunc(evt){ if(this.activeRect){ evt = evt || window.event; if(evt.preventDefault) { // Firefox evt.preventDefault(); evt.stopPropagation(); } else { ...
vue使用 better-scroll的参数和方法
热门推荐
TionSu的博客
08-28 1万+
格式：let obj = new BScroll(object,{[option1,],.,.}); Options 参数 startX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件，通常判断浏览器派发的click还是betterscr
方法/通用better-scroll【最详细教程】
weixin_46435234的博客
07-14 4871
文章目录 better-scroll介绍better-scroll 是什么起步滚动原理better-scroll 在 MVVM 框架的应用 安装NPMscript 加载 选项 / 基础startXstartYscrollXscrollYfreeScrolldirectionLockThresholdeventPassthroughclickdblclick(v1.12.0+)tapbouncebounceTimemomentummomentumLimitTimemomentumLimitDi...
怎么安装插件 better-scroll 插件
最新发布
12-12
要安装 better-scroll 插件，可以按照以下步骤进行： 1. **使用 npm 安装**： 如果你的项目使用 npm 作为包管理器，可以在项目根目录下打开终端并运行以下命令： ```bash npm install better-scroll --save ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值