微信小程序之阻止冒泡事件

最新推荐文章于 2024-06-09 14:26:11 发布
最新推荐文章于 2024-06-09 14:26:11 发布
阅读量75 收藏
点赞数
原文链接：http://www.cnblogs.com/wzy0526/p/8423989.html
版权

众所周知，在微信小程序给标签绑定点击方法大家都会想到 "bindtap"

但是在页面中会遇到 点击 会冒泡而触发其他元素的时间发生

那么怎么办呢

就把引发冒泡事件的始作俑者的 bindtap 更改成catchtap 即可

 

 

转载于:https://www.cnblogs.com/wzy0526/p/8423989.html

weixin_30577801
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
阻止小程序冒泡的三种方法
10-17 1万+
1.直接用方法 ：catchtouchmove="preventD" <view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"></view> /
微信小程序如何阻止事件冒泡
kerryqpw的博客
12-09 8974
微信小程序如何阻止事件冒泡         由于微信小程序中不能通过js阻止事件冒泡;         如何在微信小程序中实现事件冒泡。        将事件的bind   改成  catch      bind 是阻止不了冒泡的     例如 bindtap 改成 catchtap catchtap 执行事件冒泡 event.stopPropagation();...
阻止冒泡/穿透-微信小程序(vant weapp)
m0_68428581的博客
07-25 1263
（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法
【微信小程序】事件分类以及阻止事件冒泡
最新发布
云泽野の编程日记
06-09 1193
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
阻止小程序事件冒泡的三种方法
web全栈开发的博客
05-22 4111
1.直接用方法 ：catchtouchmove=“preventD” <view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"> </view> //防止点击穿透 背景层 preventD:function(){ }, 2. 使用 catch 不用bin
微信小程序--阻止冒泡事件
weixin_30819085的博客
10-10 181
微信小程序事件的使用方式 在组件中绑定一个事件处理函数。 如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 在相应的Page定义中写上相应的事件处理函数，参数是...
微信小程序bindtap事件与冒泡阻止详解
10-16
为了阻止事件冒泡，微信小程序提供了`catchtap`事件。将`bindtap`替换为`catchtap`，可以确保事件只在当前组件中处理，不会继续向上冒泡。如下所示： ```html outer middle <view bindtap='handinner'>inner ...
微信小程序冒泡事件及其阻止方法实例分析
12-02
本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考，具体如下： 事件的类别分为几种： 点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 其他：...
微信小程序阻止冒泡点击_微信小程序如何阻止多层嵌套组件的点击事件冒泡
weixin_42128393的博客
01-17 1224
先上结论删除其中：catchtap : 捕获事件，组织冒泡hover-stop-propagation ：指定是否阻止本节点的祖先节点出现点击态原因呢，可以参考微信小程序的文档事件什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, tou...
微信小程序:冒泡事件及其阻止
MAYA_G的博客
04-24 595
事件的类别分为几种：       点击事件：tap       长按事件：longtap       触摸事件：touchstart； touchend；touchcancel；touchm...
在微信小程序中怎样阻止冒泡事件？
weixin_44266024的博客
01-18 8875
在微信小程序当中，当两个包含的视图都使用了bindtap函数来绑定点击事件的话，就会发生冒泡事件（即点击内部事件时将同时触发外部事件），如果我们要想阻止冒泡事件的发生，将被包含在内部的bindtap该为catchtap即可，下面请看具体事例。
微信小程序阻止事件冒泡【看这里】
热门推荐
江拥羡橙的博客
10-30 6万+
uniapp、微信小程序阻止事件冒泡
小程序之wepy框架
Anyuegogogo的博客
08-11 1033
记录wepy
微信小程序阻止冒泡实现
weixin_43452154的博客
09-07 1504
多个元素嵌套的时候，它们就会有层次关系，当这些元素注册了相同的事件时。例如子div绑定点击事件，父div也绑定点击事件，实现操作是想要点击子div实现点击事件。现实：父div的点击事件也触发了。那小程序应该怎么样子避免事件的冒泡发生？怎么样子只触发子div绑定事件，而不是触发子div事件后连父div事件也被触发？冒泡简单来说，由内到外，一层一层的往外冒泡触发，像水泡一样，所以叫冒泡。我们通常点击事件是用bindtap来绑定div事件。
微信小程序防止点击事件冒泡
山有木兮木有枝 心悦君兮君不知
03-05 1650
使用catchtap替代bindtap
小程序如何阻止事件冒泡？
PromiseCao的博客
11-10 6199
当我们用bind去绑定事件的时候当然是会有事件冒泡的，在小程序里面如何阻止事件冒泡呢？cancelBubble、stopPropagation() 又或者是return false? 很遗憾的是浏览器那套阻止冒泡的做法在小程序里并没有实现。 但是对于阻止冒泡这种常用的功能小程序有自己的方法，只要绑定事件事用catch类型代替bind该事件触发时就会自动阻止冒泡，向下面这样 ...
微信小程序中阻止事件冒泡
xjun0812的博客
09-21 9168
使用场景 如上图，这是一个活动的列表页面，当用户点击整个列表时，跳转到活动详情页面，当用户点击“去报名”按钮时，跳转到报名页面。但是当我们用"bindtap"事件绑定，点击“去报名”按钮后，会先跳转到报名页面，再跳转到活动详情页面。   问题分析 出现这个问题的原因，就是事件冒泡引起，关于事件冒泡我这里就不多讲了。   解决方法 解决方法就是要阻止事件冒泡，把“bindtap”改...
阻止小程序冒泡
caoyan0829的博客
04-18 1193
1.直接用方法 ：catchtouchmove="preventD" &lt;view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"&gt;&lt;/view&gt;  
uniapp开发微信小程序阻止事件冒泡
m0_55258023的博客
08-23 3976
uniapp开发微信小程序阻止事件冒泡
微信小程序 阻止冒泡
08-19
要去掉微信小程序输入框下面的线，你可以在对应的样式文件中进行设置。可以尝试以下几种方法： 1. 使用自定义样式覆盖默认样式：在对应页面的 `.wxss` 样式文件中添加以下代码： ``` .input-class::after { border...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值