微信小程序的事件冒泡和捕获

事件冒泡
阻止事件冒泡
事件捕获
中断事件捕获

事件冒泡

当一个组件上的事件被触发后，该事件会向父节点传递。

bind事件名

eventBind.wxss

.one{width: 300px;height: 300px;background: #96c24e;
}
.two{width: 200px;height: 200px;background-color: #bec936;
}
.three{width: 100px;height: 100px;background-color: #f97d1c;
}

eventBind.js

Page({_handlerOne:function(){console.log("one");},_handlerTwo:function(){console.log("Two");},_handlerThree:function(){console.log("Three");}
})

eventBind.wxml

<text>事件的冒泡</text>
<view class="one" bindtap="_handlerOne">one<view class="two" bindtap="_handlerTwo">two<view class="three" bindtap="_handlerThree">three</view></view>
</view>

当点击three层时：

事件会冒泡到two层和one层：

阻止事件冒泡

catch事件名

eventBind.wxml

<text>事件的冒泡</text>
<view class="one" bindtap="_handlerOne">one<view class="two" catchtap="_handlerTwo">two<view class="three" bindtap="_handlerThree">three</view></view>
</view>

当点击three层时：

事件向父组件冒泡，冒泡到two层时被阻止。

事件捕获

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用:

capture-bind:事件名

eventBind.wxml

<view class="one" capture-bind:tap="_handlerOne">one<view class="two" capture-bind:tap="_handlerTwo">two<view class="three" capture-bind:tap="_handlerThree">three</view></view>
</view>

当点击three层时：

事件捕获开始，从被点击的父组件执行到该被点击的元素：

中断事件捕获

capture-catch:事件名

capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

eventBind.wxml

<view class="one" capture-bind:tap="_handlerOne">one<view class="two" capture-catch:tap="_handlerTwo">two<view class="three" capture-bind:tap="_handlerThree">three</view></view>
</view>

当点击three层：

事件在two层被中断：

微信小程序的事件冒泡和捕获相关推荐

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

微信小程序的事件冒泡和捕获

微信小程序的事件冒泡和捕获

事件冒泡

阻止事件冒泡

事件捕获

中断事件捕获

微信小程序的事件冒泡和捕获相关推荐

最新文章

热门文章