Taro 、Taro-hook中阻止冒泡 怎么阻止事件冒泡方法-亲测有效

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

前言：
以前在使用Taro class组件的时候一直使用的是e.stopPropagation()；来阻止冒泡事件，
现在改为hook 函数式组件在使用e.stopPropagation()阻止冒泡不好使了。

Taro官网文档上指出

在这里插入图片描述

在这里插入图片描述
按照官网提示进行修改，发现以上方法无效。依然会发生冒泡。

官方提供的在事件内使用 e.stopPropagation(); 的方式不能有效的阻止事件冒泡。

方法没有问题，只能进行疯狂试错，最终发现在使用箭头函数的方式使用e.stopPropagation()，可以直接有效的阻止事件冒泡。

在这里插入图片描述
在标签中使用onClick方法 ，使用箭头函数onClick={(e)=>{e.stopPropagation(),toEda(item.school_id)}}

前端攻城狮J
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
taro-plugin-tailwind:Taro接收tailwindcss插件
03-15
安装在Tar​​o项目根目录下安装$ npm i taro-plugin-tailwind --save-dev$ # 或使用 yarn$ yarn add -D taro-plugin-tailwind使用约会插件请确保Taro CLI已升级到Taro 3的最新版本，确保taro-plugin-tailwind版本在...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
Taro开发小程序如何阻止事件冒泡
Cinderellahh92的博客
08-15 738
在 Taro 中不能像微信小程序一样,使用 catchEvent阻止事件冒泡，必须在执行事件中调用e.stopPropagation. clickHandle = e => { // 阻止事件冒泡 e.stopPropagation(); };
Taro 小程序 阻止事件冒泡
lsk222的博客
05-08 1800
网上大概有两种阻止事件冒泡的方式 : 方式一：（部分开发者说此种操作无效，可尝试下面两种） handleClick=(e)=>{ e.stopPropagation() } <View className='iconfont iconxinxi' onClick={(e)=>{this.handleCilick()}} </View> 方式二：(元素嵌套少时，此种方式有效) handleClick=(e)=>{
Taro阻止事件冒泡
路漫漫的博客
06-03 5026
Taro进行小程序开发，遇到了事件冒泡的问题，在网上查到以下解决办法 onClick = (e) => { e.stopPropagation() // 阻止事件冒泡 ···· } 但是并没有效果。 最后，解决办法：点击事件冒泡只会在父子组件之间产生,将重叠按钮改为兄弟组件，然后用绝对定位布局 ...
Taro 阻止事件冒泡方法-亲测有效
qq_42228073的博客
09-22 3615
Taro 中官方给了阻止事件冒泡的方式。 我当前的Taro 版本是2.2.3。 但是发现以上方法无效。依然会发生冒泡。 官方提供的在事件内使用e.stopPropagation(); 的方式不能有效的阻止事件冒泡。 所以，在不厌其烦的实验了一堆阻止事件冒泡的方法。 最终发现，在使用匿名函数的方式可以直接有效的阻止事件冒泡。 在标签的绑定事件中，使用匿名函数 onClick={ e=>{e.stopPropagation()}}; 就可以有效阻止事件冒泡,亲测有效。 ...
真解决办法，taro 事件阻止冒泡
besttoby01的博客
10-25 2774
首先看官网的解决办法： 实践场景：页面底部flex布局，最右边存在“去结算”按钮，整个底部点击的时候要展开商品列表。 实践结果：点击去结算的时候，展开了商品列表。 判断结果：无效。 解决办法：函数bind一下，就可以解决了。 这里还是一样。 总结一下：文档不一定正确。bind函数的作用只是改变了作用单位，那么可以猜想一下，两个e不一样。 ...
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
taro-iconfont-cli 在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3...
taro-native-shell:Taro 原生 React Native 壳子
05-17
目前支持0.60以上的RN版本, 以及 Taro3 (支持 Taro 3.2.0-beta.4及以上版本，以下版本请使用 0.63.2 版本)Taro 2 对应分支：Taro 1 对应分支：taro-native-shellTaro 原生 React Native 壳子，和 React Native init ...
taro-ui-vue:Tarovue的UI KIT
04-13
taro-ui-vue项目背景tarojs 已经开始支持 vue 去写 taro 应用了，由于缺少相关的 ui 库，因此决定 按照 taro-ui 重写成 vue 组件。形成了 taro-ui-vue 这个库。相关链接使用注意Taro Ui Vue 提供的是源文件，源文件...
小程序 · 遮罩层：阻止事件冒泡、禁止滑动
weixin_42091247的博客
10-26 1644
目录方法一：方法二：阻止事件冒泡禁止滑动 方法一： 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 1249
点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 写一个简单的例子，WXML文件如下： <view class='red' bindtap='redclick'> <view class='yellow' bindtap='yellowclick'> <view cl...
阻止冒泡和取消默认行为(JS)
Elementsboy的博客
06-07 316
冒泡和捕获是事件的两种行为 使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。 使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。 - 比如：在a标签href属性上的跳转，form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。 我们可以通过js取消或更改这些默认事件。 防止冒泡和捕获： w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble
stopPropagation
weixin_33743703的博客
06-27 108
2019独角兽企业重金招聘Python工程师标准>>> ...
阻止事件冒泡和事件捕获 阻止事件默认行为
weixin_30482383的博客
08-03 308
阻止事件的传播：• 在W3c中，使用stopPropagation（）方法• 在IE下设置cancelBubble = true；在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~ 阻止事件的默认行为，例如click <a>后的跳转~• 在W3c中，使用preventDefault（）方法；• 在IE下设置window.event.retur...
taro小程序阻止事件冒泡
EstherNi的博客
03-23 438
taro小程序阻止事件冒泡
阻止向上冒泡stopPropagation()，另一种写法
weixin_43923673的博客
02-28 6706
之前看的都是直接给元素添加click事件，然后在click事件里面写。如下： $("span").click(function(event){ event.stopPropagation(); alert("The span element was clicked."); }); 但是如果想要用onclick=xxx()来调用点击事件时，直接写 event.stopPropagation()...
e.stopPropagation() 失效原因
echo
11-06 6146
<body> <div class="father"> <div class="son"> </div> </div> </body> 假如此父子元素为 动态添加的元素 所以在添加事件的时候需要绑定到父级元素 例如：父元素事件 $("body").on("click",".father",function(e){ alert(1) }); 例如：子元素事件 $(document).on("click",".son",f
echarts-taro3-react hook
最新发布
09-01
引用中提到了 echarts-taro3-react 是基于 Taro3.x-React 框架构建的微信小程序版本 echarts 组件。可以通过下载或者 npm 安装来使用。下载地址为 https://github.com/Cecilxx/echarts-taro3-react ，可以通过执行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值