微信小程序 子元素事件不触发父元素事件

Posted 2023-04-26

参考技术A bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡
当点击子集的 catchtap='child' 事件之后阻止冒泡事件向上冒泡，所以不会触发 bindtap='father'

微信小程序-bindtap事件子元素不传参

 

<ul id="tabBar">
    <li class="{{currentTabBar_s == 10?\'active\':\'\'}}" data-current="10" bindtap="swichTabN"><image src=\'../../images/icon/tab_MyTodo_s.png\' class=\'img_s\'></image><image src=\'../../images/icon/tab_MyTodo.png\' class=\'img_n\'></image><span>待办</span></li>
    <li class="{{currentTabBar_s == 11?\'active\':\'\'}}" data-current="11" bindtap="swichTabN"><image src=\'../../images/icon/tab_Customers.png\' class=\'img_n\'></image><image src=\'../../images/icon/tab_Customers.png\' class=\'img_s\'></image><span>客户</span></li>
    <li class="{{currentTabBar_s == 12?\'active\':\'\'}}" data-current="12" bindtap="swichTabN"><image src=\'../../images/icon/tab_Find.png\' class=\'img_n\'></image><image src=\'../../images/icon/tab_Find.png\' class=\'img_s\'></image><span>发现</span></li>
    <li class="{{currentTabBar_s == 13?\'active\':\'\'}}" data-current="13" bindtap="swichTabN"><image src=\'../../images/icon/tab_Achieve.png\' class=\'img_n\'></image><image src=\'../../images/icon/tab_Achieve.png\' class=\'img_s\'></image><span>业绩</span></li>
  </ul>

　　

 

 // 点击标题切换当前页时改变样式
  swichTabN: function (e) {
    var _this=this;

　　　var cur = e.target.dataset.current;    

 

　　//点击li的子级元素，不进行值改变，解决方法把取值方式  由e.target.dataset.current;  修改为e.currentTarget.dataset.current即可

    var cur = e.currentTarget.dataset.current;
    console.log(_this.data.currentTabBar_s)
    console.log(_this.data)
    if (this.data.currentTabBar_s == cur) { console.log(123);return false; }
    else {
      console.log(5687)
      this.setData({
        currentTabBar_s: cur
      })
    }
  },