微信小程序view绑定点击事件源码及出现问题 逻辑分析

点击使view发生变化

分析:

e.target 和 e.currentTarget 混淆,导致触发事件 却不传值

问题原理：
（主要用于页面传值）
1、如果绑定的事件所在元素没有子元素，用e.target和e.currentTarget的结果是一样的；

2、如果事件绑定在父元素中，而且这个父元素有子元素，用e.target时，点击父元素所在区域没有错误，但是点击子元素区域，事件触发了，但是你会发现值并没有传过去，原因是事件没绑定在子元素上，是在父元素上，子元素要用e.currentTarget才正确。当用e.currentTarget时，不管点击父元素所在区域还是子元素（当前事件），都正确执行。

源码

<view class="{{numb == 1?'selected':'price'}}" data-num = "1" bindtap="clickNum">北京</view>
<view class="{{numb == 2?'selected':'price'}}" data-num = "2" bindtap="clickNum">上海</view> 
<view class="{{numb == 3?'selected':'price'}}" data-num = "3" bindtap="clickNum">广州</view>
<view class="{{numb == 4?'selected':'price'}}" data-num = "4" bindtap="clickNum">杭州</view> 

    data:{
      numb: 0,
    },
    clickNum: function (e) {
      console.log(e.target.dataset.num)
      this.setData({
      //  numb: e.target.dataset.num 也可实现
      numb: e.currentTarget.dataset.num
      })
     }, 

 
.price{
  width: 130px;
  height: 80px;
  line-height: 80px; 
  text-align: center; 
  border: 2rpx solid #bdbcbc; 
  color: #301e35;
  margin-right: 20px;
  border-radius: 5px;
}
.selected {
  width: 130px;
  height: 80px;
  line-height: 80px; 
  text-align: center; 
  border: 2rpx solid #07bb8e; 
  color: #07bb8e;
  margin-right: 20px;
  border-radius: 5px;
}