微信小程序中target与currentTarget

如有错误,请纠出,大家一起进步!!!

  target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件。

下面请看例子:

text.wxml:

<view class="view1" bindtap="view1Click" id="view1">
view111...
<view class="view2" bindtap="view2Click" id="view2">
view222...
<view class="view3" bindtap="view3Click" id="view3">
view333...
</view>
</view>
</view>

test.js:

Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

},
view1Click:function(event){
console.log("view1Click");
console.log(event);
},
view2Click: function () {
console.log("view2Click");
},
view3Click: function (event) {
console.log("view3Click");
console.log(event);
}
})

test.wxss:

.view1{
height:500rpx;
width: 100%;
background-color: red;
}
.view2{
height:400rpx;
width: 80%;
background-color: green;
}
.view3{
height:300rpx;
width: 60%;
background-color: gray;
}

此时由于是bind绑定事件,点击view333会引发冒泡事件,出现如下结果:

若将bind绑定改成catch绑定,不会出现冒泡,view1不会触发事件:

test.wxml:

<view class="view1" bindtap="view1Click" id="view1">
view111...
<view class="view2" bindtap="view2Click" id="view2">
view222...
<view class="view3" catchtap="view3Click" id="view3">
view333...
</view>
</view>
</view>

时间: 2024-10-11 12:59:08

微信小程序中target与currentTarget的相关文章

微信小程序的target和currentTarget的区别

https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别. 首先上代码: wxml部分: ? 1 2 3 4 <view id='tar-father' bindtap='click'>   父组件   <view id='tar-children'>子组件</view>  </view> wxss

微信小程序中的 hover-class

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time 这三个属性. 使用方法: <view hover-class="bg_red">这是

微信小程序中的单位

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

微信小程序中的循环遍历问题

比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 for(var i=0;i<10;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口10次,那么输出的结果就会不同(这是产生了闭关的效应) eg:每次调用一次wx.showToast()接口,并在成功时输出循环的值. for(var i=0;i<10;i++){ wx.showToast({ title: 'haha', success:function(){

微信小程序中使用ECharts 异步加载数据 实现图表

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas

在微信小程序中使用redux

本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处理异步请求(异步操作),如何解决? 如何正确使用store的三大核心方法(getStore dispatch subscribe)? redux并不是react专属,所以他可以在任何地方使用,小程序也不例外.解决上面三个问题就可以了. 问题一: 如何在小程序中引入redux状态管理库,及它相关的插件

在微信小程序中使用LeanCloud(一)

之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数据库(开发版免费).适用于一些想自己写微信小程序前端但不太会后端的开发者学习用.本篇文章涉及数据存储服务(增删查改). 首先,下载一个JavaScript-sdk :av-weapp-min.js[下载链接],它是在微信小程序中使用此数据库的关键文件.下载之后,保存至项目路径,这里以'/libs/a

微信小程序中转义字符的处理

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用