[微信小程序]微信小程序点击事件返回值的target分析

微信小程序点击事件返回值的target分析

测试过程

在微信小程序中创建以下图片

然后在调试中点击下面第5个。
console返回两个e
第一个e是第5块小块的e

第二个e是下面全部9小块组成的大块的e

可以看到，currentTarget节点是不一样的。

分析

在HTML或者WXML这些基于XML的树形结构的界面布局方式中，元素与元素之间是有层级关系的，子级元素上触发的事件，可以向父级元素逐层向上传递，所以，父级元素上也可以捕获子级元素上的事件并进行逻辑处理。
1. 使用 bind 开头的事件绑定，这种绑定不会阻止冒泡事件向上冒泡
2. 使用 catch 开头的事件绑定，这种绑定可以阻止冒泡事件向上冒泡

结论

event对象中
- target是事件产生的源头组件
- currentTarget则是当前捕获这个事件的组件。

(current - adj. 现在的; 最近的; 流行的; 流传的; n. 电流; 趋势; 水流; 涌流; )

target.id/currentTarget.id 为 目标事件的id

测试使用的代码

<view class="section">
<movable-area style="height: 300px;width: 300px; background: red;">
<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">1</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">2</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">3</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">4</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">5</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">6</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">7</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">8</movable-view>

<movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">9</movable-view>
</movable-area>

<view style="height: 300px;width: 300px; background: red;" class="main" bindtap="viewmove">
<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">1</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">2</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">3</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">4</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view" bindtap="viewmove">5</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">6</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">7</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">8</view>

<view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">9</view>
</view>

<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>

 。
 。
 。
 。
 。。

 。。

 。
</view>

.k{
background: green;
height: 100px;
width: 100px;
position:absolute;
}

movable-view{
height: 98px;
width: 98px;
background: blue;
position:relative;
border:1px dashed #fff;
}


.view{
height: 98px;
width: 98px;
background: blue;
position:relative;
border:1px dashed #fff;
display: inline-block;
}
.main{
margin-top:10px;
}

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
      x:0,
      y:0
  },
  onLoad: function () {
    console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
//更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  },  tap: function(e) {
this.setData({
            x: 30,
            y: 30
        });},
  scroll:function(){
    console.log("haha")
  },
    move:function(e){
this.setData({
              left:e.touches[0].clientX-60,
              top:e.touches[0].clientY-60
          })
      console.log(e)
    },
    b1:function (e) {
//console.log("e")
        console.log(e)
//console.log(this.data.x)
    },
    viewmove:function(e){
        viewmove(e,this)
    }

})

function viewmove(e,that){
    console.log(e)
}