小程序一点击view （父组件）如何改变相应的子元素的属性

例如要实现这样的功能：不论点击最外部的view还是view里面的任何组件

view里面的input的光标都能输入并且有多个view
也就是每个view不能被上一个所覆盖

wxml部分


view id="outer" catchtap='pressView' style='display:flex;flex-direction:row;position:relative;'>
    <input class="clear"  style='width:90%;height:140rpx;border:3rpx solid blue;margin-left:0rpx;padding-left:80%'  focus="{{flag==1?true:false}}" id="1"  data-text="{{flag}}"/>
    <image src='../../resources/baicai.jpg' style='width:120rpx;height:120rpx;position:absolute;left:10rpx;top:12rpx;font-size:28rpx' id='1' data-text="{{flag}}"></image>
</view>
<view id="outer" catchtap='pressView' style='display:flex;flex-direction:row;position:relative;'>
    <input class="clear"  style='width:90%;height:140rpx;border:3rpx solid blue;margin-left:0rpx;padding-left:80%'  focus="{{flag==2?true:false}}" id="2"  data-text="{{flag}}"/>
    <image src='../../resources/baicai.jpg' style='width:120rpx;height:120rpx;position:absolute;left:10rpx;top:12rpx;font-size:28rpx' id='2' data-text="{{flag}}"></image>
</view>



js部分

pressView: function (e) {
    console.log(e);
    var viewId = e.target.id;
    var viewDataSet = e.target.dataset;
    var viewText = viewDataSet.text;
    this.setData({
      flag: e.target.id
    })
    console.log(viewId); //输出点击的view的id，第二种情况就不重复写了
    console.log(viewText); //输出该文本
   
  },


  这里我在研究小程序的时候 发现 target
  跟currenttarget的一个区别
  如果把方法写在 最外层的view上那么此时你点击的是最外层的view  currenttarget.id=target.id

  但是如果你是点击的view里面的子组件那么不好意思
  现在的currenttarget.id就是你方法所在的那个view的id
  target.id就是你点击的那个子组件对应的id
  此时这个两个是不等的，除非你写相同的值

我很想把动态的效果图贴出来，但是我也是头一次写这个博客，还没研究怎么上传视频，大家先凑合看吧，有不懂的可以留言，我有空就回复