小程序--e.target和e.currentTarget区别
事件捕获与事件冒泡
事件捕获是从外到内,事件冒泡是从内到外。
注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在dataset中获取(******)
target:指事件源组件对象 currentTarget:当前组件对象
分两种情况是属于冒泡事件还是非冒泡事件
第一种情况:属于冒泡行为bind
wxml页面代码:
<view id="outter" bind:tap="tap1">
outer view
<view id="middle" bind:tap="tap2">
middle view
<view id="inner" bind:tap="tap3">
inner view
</view>
</view>
</view>
js代码:
tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {
console.log(2, e)
},
tap3: function (e) {
console.log(3, e)
}
运行结果:
点击子元素inner,但由于是冒泡行为父类元素middle和outter都触发,从结果可以看出:
父类middle和outter,target的id都是等于inner(子元素的id);
middle的currentTarget的id是middle,outter的currentTarget的id是outter;
第二种情况:非冒泡行为 catch
wxml代码: (和第一种不一样的点在于都改成catch:tap)
<view id="outter" catch:tap="tap1">
outer view
<view id="middle" catch:tap="tap2">
middle view
<view id="inner" catch:tap="tap3">
inner view
</view>
</view>
</view>
js代码:
tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {
console.log(2, e)
},
tap3: function (e) {
console.log(3, e)
}
结果:
因为在middle和inner都设置了非冒泡行为,所以都只是运行到自己的不会往上走,这个结果是分别点击了middle和inner,以上这些可以得出:
当事件没有冒泡行为时,target和currentTarget都指向事件触发的对象本身。
需要注意的:还有一种情况是如果inner是冒泡,middle是非冒泡,点击inner的结果
结果还是和第一种一样
总结:
1.当全是冒泡行为时:
target:事件源组件对象(事件的冒泡源头)
currentTarget:当前组件对象(就是当前所处的对象)
2.当没有冒泡行为时:
target和cueerntTarget是一样的,就是当前所处的对象
小程序--e.target和e.currentTarget区别的更多相关文章
- 微信小程序——e.target与e.currentTarget的区别
在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...
- 彻底弄懂小程序e.target与e.currentTarget
一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...
- 【小程序】获取到的e.target与e.currentTarget区别
[小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...
- 微信小程序的target和currentTarget的区别
https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下 ...
- 微信小程序中target与currentTarget
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- vue中的绑定class和微信小程序中的绑定class的区别
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
- event.target和event.currentTarget区别
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
随机推荐
- 元素在当前窗口可视的区域---Element.scrollIntoView()
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...
- centos 普通用户 和 root 相互切换方法
root 用户切换为普通用户 :用 login -f username (加 -f 不用输入密码)例如普通用户的用户名为hadoop,这里就是 login -f hadoop 普通用户切换为root用 ...
- 封装qt http文件下载类
#include <QApplication> #include <QtWidgets> #include <QtNetwork> //downloads one ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第5节 SpringBoot部署war项目到tomcat9和启动原理讲解_22、SpringBoot启动方式和部署war项目到tomcat9
笔记 1.SpringBoot启动方式讲解和部署war项目到tomcat9 简介:SpringBoot常见启动方式讲解和部署war项目Tomcat 1.ide启动 2.jar包方式启动 ...
- PHP中Cookie与 Session
在非常多时候,我们需要跟踪浏览者在整个网站的活动,对他们身份进行自动或半自动的识别(也就是平时常说的网站登陆之类的功能),这时候,我们常采用 Cookie与 Session 来跟踪和判断. Sess ...
- ToggleButton 和 Switch
界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- iptables 配置场景3
iptables -I INPUT -i lo -j ACCEPT #允许本地回环地址访问: iptables -I INPUT -m state --state ESTABLISHED,REL ...
- fkutter Stepper步骤指示器
一个Material Design 步骤指示器,显示一系列步骤的过程 import 'package:flutter/material.dart'; class StepperDemo extends ...
- 超级简单的checkbox赋值,用于记住登陆名
<input name="rememberme" type="checkbox" id="rememberme" onclick=&q ...
- Windows Vistual Studio 2013/2015 MRPT安装
博客参考:https://blog.csdn.net/qyjzhou/article/details/80110941 MRPT 安装 1. 官网编译好的程序直接安装 https://sourcefo ...