在vue中阻止事件冒泡的方法使用的event.stopPropagation();

但微信小程序中事件传递的event却没有stopPropagation()这个方法

解决方案：将绑定事件的bindtap改为catchtap

微信开发文档 | 事件详解、事件绑定
微信开发文档上提供了不同的事件绑定方法：
1. bindtap：普通事件绑定
2. catchtap：绑定并阻止事件冒泡
3. mut-bind ：互斥事件绑定

这里我们使用catchtap

如下方示例，在使用catchtap绑定事件后，当用户点击image时，事件不会向上冒泡，就不会触发view绑定的点击事件

<view class="right" bindtap="handlePlayClick"><image class="icon play" src="/assets/images/music/{{ isPlaying ? 'pause': 'play' }}_icon.png"catchtap="handlePlayBtnClick"></image><image class="icon playlist" src="/assets/images/music/playlist_icon.png"></image></view>

微信小程序阻止事件冒泡相关推荐

微信小程序阻止事件冒泡
uniapp阻止事件冒泡:将子类的点击事件@click写成@click.stop 小程序阻止事件冒泡:将子类的点击事件bindtap写成catchtap
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
WeChat applet 微信小程序(3) 事件绑定
WeChat applet 事件绑定概述事件是视图层到逻辑层的通讯方式,事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定到组件,当用户在视图层触发该组件的事件时,就会执行逻辑层中对应的事件 ...
微信小程序-绑定事件以及bindtap和catchtap的区别
前言在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的.那么他们两个的区别在哪里呢? 一.首先我们要先知道什么是事件微信 ...
微信小程序scroll事件/onPageScroll事件的延迟问题
需求在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
微信小程序 - 绑定事件 bindtap（包括是否传入参数）
小程序绑定事件的方式有很多种,这里我只对bindtap的绑定方式进行介绍,其他的绑定方式也是差不多这样的. 1.不带参数的绑定方式 index.wxml文件中:share表示绑定的事件名称 < ...
微信小程序画布实现冒泡点赞，三阶贝塞尔曲线
一.核心代码 1)wxml 核心代码 <canvas wx:for="{{bezierCount-0}}" wx:key="key" class=&quo ...
uniapp 微信小程序阻止点击事件click冒泡
使用uniapp开发小程序的时候,@click.stop来做事件冒泡没有作用. 需要把@click.stop改成@tap.stop就可以实现了.

微信小程序阻止事件冒泡

在vue中阻止事件冒泡的方法使用的event.stopPropagation();

但微信小程序中事件传递的event却没有stopPropagation()这个方法

解决方案：将绑定事件的bindtap改为catchtap

这里我们使用catchtap

微信小程序阻止事件冒泡相关推荐

最新文章

热门文章