小程序事件绑定、事件传参以及嵌套点击事件的冲突解决

1. 事件绑定

• 绑定

bind绑定；
catch绑定；（能阻止事件冒泡）
何为阻止事件冒泡？
---------------从而一并解决嵌套点击事件的冲突问题

需求：点击购物车商品加入购物车，点击条目进入商品详情

wxml

       ///  parent click
            ......
            
              ......
                    ///  child click
               
            
          

js

 //child click 事件处理函数
  clickCart:function(e){
    console.log('child click')
  },
  
 //parent click 事件处理函数
  toDetailsTap: function (e) {
    console.log('parent click')
  },

运行并点击上图的购物车，可以在Console输出平台可以看到

从上可以看到，child click先响应，parent click紧跟再响应-------像这种，就叫做事件冒泡。但是现在出现的状况并不是需求所体现的…
解决办法：把child click的bindtap='clickCart'换成catchtap='clickCart'即可，再不然换成catchtap='clickCart' hover-stop-propagation='true'。

• 事件类别

bindtap：点击事件；

longtap：长按事件；

touchstart：触摸开始；

touchend：触摸结束；

touchcansce：取消触摸；
具体用法：

  
    
      {{item}}
    
  

然后在js中编辑对应方法即可实现对应效果。

• 事件传参
  上述的child click 输出event

 clickCart:function(e){
    console.log(e)
  },

会看到

注：返回结果

• type
  点击事件的类型
• changedTouches
  元素距离文档的x轴，y轴，可视窗口的x轴，y轴的距离。
• currentTarget(常用)
  绑定该事件的元素（被点击的这个view）
• dataset（传参的容器）
  元素上的自定义属性
• id
  元素的id
• offsetLeft
  元素距离具有定位元素的左侧的距离
• offsetTop
  元素相对于具有定位元素的顶部的距离
• target
  事件的监听，事件引发的一系列后续变化
• id
  元素的id
• offsetLeft
  元素距离具有定位元素的左侧的距离
• offsetTop
  元素相对于具有定位元素的顶部的距离
• dataset
  元素上的自定义属性
• timeStap
  事件触发的时间戳
• touches
  滑动触发
  文档的左侧，顶部距离，可视窗口的左侧，顶部距离

其中的dataset可以看作传参的容器，在wxml中自定义一些参数，在dataset中会显示出来：

//在child click 自定义了 data-name="haha" data-id="id"
 

运行查看console

在js中，获取携带参数

 clickCart:function(e){
   const dataset = e.currentTarget.dataset,
    value = dataset.name;
    value = dataset.id;
  },

然后，通过界面跳转什么的可以做其他业务了。如果对跳转不太熟悉可以看
https://blog.csdn.net/julystroy/article/details/86483035