Taro开发小程序如何阻止事件冒泡

最新推荐文章于 2023-03-23 16:05:33 发布
最新推荐文章于 2023-03-23 16:05:33 发布
阅读量775 收藏
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cinderellahh92/article/details/108021574
版权

在 Taro 中不能像微信小程序一样,使用 catchEvent阻止事件冒泡，必须在执行事件中调用e.stopPropagation.

clickHandle = e => {
  // 阻止事件冒泡
  e.stopPropagation();
};

 

92huahua
关注
专栏目录
如何在 React 中阻止事件冒泡
ByteGlide的博客
09-30 3022
事件冒泡是指在 Web 开发中当一个元素触发某个事件时，该事件会向上层元素传播，直到到达文档根节点。在 React 中，我们可以使用一些技术手段来取消或阻止事件冒泡的传播。在 React 中，事件传播分为捕获阶段和冒泡阶段。通过上述三种方法，我们可以在 React 中取消或阻止事件冒泡的传播。根据具体的需求，选择合适的方法来处理事件冒泡问题。React 中的事件处理函数会接收到一个事件对象，我们可以调用该对象的。方法来取消事件的继续传播。另一种取消事件冒泡的方法是使用事件对象的。方法来阻止事件冒泡的传播。
微信小程序开发markdown博客
热门推荐
编程知识分享，主打前端
10-13 3万+
小程序开发markdown博客
Taro 小程序 阻止事件冒泡
lsk222的博客
05-08 1984
网上大概有两种阻止事件冒泡的方式 : 方式一：（部分开发者说此种操作无效，可尝试下面两种） handleClick=(e)=>{ e.stopPropagation() } <View className='iconfont iconxinxi' onClick={(e)=>{this.handleCilick()}} </View> 方式二：(元素嵌套少时，此种方式有效) handleClick=(e)=>{
Taro 、Taro-hook中阻止冒泡 怎么阻止事件冒泡方法-亲测有效
weixin_46662539的博客
10-29 1166
前言： 以前在使用Taro class组件的时候一直使用的是e.stopPropagation()；来阻止冒泡事件， 现在改为hook 函数式组件在使用e.stopPropagation()阻止冒泡不好使了。 Taro官网文档上指出 按照官网提示进行修改，发现以上方法无效。依然会发生冒泡。 官方提供的在事件内使用 e.stopPropagation(); 的方式不能有效的阻止事件冒泡。 方法没有问题，只能进行疯狂试错，最终发现在使用箭头函数的方式使用e.stopPropagation()，可以直接有
taro小程序阻止事件冒泡
最新发布
EstherNi的博客
03-23 488
taro小程序阻止事件冒泡
Taro阻止事件冒泡
路漫漫的博客
06-03 5087
Taro进行小程序开发，遇到了事件冒泡的问题，在网上查到以下解决办法 onClick = (e) => { e.stopPropagation() // 阻止事件冒泡 ···· } 但是并没有效果。 最后，解决办法：点击事件冒泡只会在父子组件之间产生,将重叠按钮改为兄弟组件，然后用绝对定位布局 ...
小程序 · 遮罩层：阻止事件冒泡、禁止滑动
weixin_42091247的博客
10-26 1842
目录方法一：方法二：阻止事件冒泡禁止滑动 方法一： html <!-- 遮罩层 --> <view class="mask" wx:if="{{hasMask}}" bindtap="hideMask">我是遮罩层</view> <view class="content" wx:if="{{hasMask}}">我是页面内容</view> js data: { hasMask: false, }, showMask(e) {
微信小程序:冒泡事件及其阻止
qq_39958629的博客
04-08 1287
点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 写一个简单的例子，WXML文件如下： <view class='red' bindtap='redclick'> <view class='yellow' bindtap='yellowclick'> <view cl...
Taro小程序学习总结
庚中
10-15 1423
1. Taro 1.1. 介绍 官网 开发文档 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。 多端： 微信小程序 H5 React Native 支付宝小程序 百度智能小程序 快应用 适配中 2. 运行项目 2.1. 安装脚手架工具@...
微信小程序 select 下拉框组件功能
10-16
在微信小程序中，为了防止事件冒泡，可以使用catchtap属性代替bindtap属性。例如，在select组件外部，可以绑定catchtap="close"方法，当点击select组件外部区域时，调用close方法来关闭select组件的显示。这样设计...
小程序如何阻止事件冒泡？
PromiseCao的博客
11-10 6244
当我们用bind去绑定事件的时候当然是会有事件冒泡的，在小程序里面如何阻止事件冒泡呢？cancelBubble、stopPropagation() 又或者是return false? 很遗憾的是浏览器那套阻止冒泡的做法在小程序里并没有实现。 但是对于阻止冒泡这种常用的功能小程序有自己的方法，只要绑定事件事用catch类型代替bind该事件触发时就会自动阻止冒泡，向下面这样 ...
微信小程序（触控事件）
weixin_45626166的博客
11-29 884
事件类型 在编写代码中，使用频率高的事件方式是 事件类型 常见的事件类型 事件绑定 事件绑定的写法同组件的属性，以 key、value 的形式 ①key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart ②v...
真解决办法，taro 事件阻止冒泡
besttoby01的博客
10-25 2849
首先看官网的解决办法： 实践场景：页面底部flex布局，最右边存在“去结算”按钮，整个底部点击的时候要展开商品列表。 实践结果：点击去结算的时候，展开了商品列表。 判断结果：无效。 解决办法：函数bind一下，就可以解决了。 这里还是一样。 总结一下：文档不一定正确。bind函数的作用只是改变了作用单位，那么可以猜想一下，两个e不一样。 ...
Taro 阻止事件冒泡
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-21 8450
在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。例如，阻止事件冒泡你可以这样写： class Toggle extends Component { constructor (props) { super(props) this.state = {isToggleOn: true} } ...
在微信小程序中怎样阻止冒泡事件？
weixin_44266024的博客
01-18 8973
在微信小程序当中，当两个包含的视图都使用了bindtap函数来绑定点击事件的话，就会发生冒泡事件（即点击内部事件时将同时触发外部事件），如果我们要想阻止冒泡事件的发生，将被包含在内部的bindtap该为catchtap即可，下面请看具体事例。
阻止小程序冒泡的三种方法
10-17 1万+
1.直接用方法 ：catchtouchmove="preventD" &lt;view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"&gt;&lt;/view&gt; /
小程序阻止事件冒泡
weixin_42340514的博客
11-21 707
<view class="wrap-num" bindtap="closeModul"> <text class="glyphicon glyphicon-minus" style='font-size:40rpx;' catchtap="reducenum">-</text> <input type='...
Taro 小程序总结
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-21 2459
最近，工作加班写小程序，虽然之前也写了不少小程序，但大多是使用小程序原生来写，也使用过wepy框架，风格和vue差不多，这次尝试使用taro框架。今天小程序告一断落，特此总结一波。 1. 安装使用Taro 安装 npm install -g @tarojs/cli 使用命令创建模板项目 $ taro init myApp 微信小程序编译预览及打包 $ npm run dev:wea...
Taro 阻止事件冒泡方法-亲测有效
qq_42228073的博客
09-22 3833
Taro 中官方给了阻止事件冒泡的方式。 我当前的Taro 版本是2.2.3。 但是发现以上方法无效。依然会发生冒泡。 官方提供的在事件内使用e.stopPropagation(); 的方式不能有效的阻止事件冒泡。 所以，在不厌其烦的实验了一堆阻止事件冒泡的方法。 最终发现，在使用匿名函数的方式可以直接有效的阻止事件冒泡。 在标签的绑定事件中，使用匿名函数 onClick={ e=>{e.stopPropagation()}}; 就可以有效阻止事件冒泡,亲测有效。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值