?
?
经典案例
  • 福州沐仙生建盏
  • 福建新路旅游文化流传有限公司
  • 宁德好记建材公司
?

微信小程序中target与currentTarget

颁布于:2018-02-07 19:46来源:福州网站制作 作者:福州杏彩娱乐平台直属代理 点击:

  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>

 

tag标签:
------分隔线----------------------------
------分隔线----------------------------
?
Sitemap
条评论
Sitemap
条评论