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

时间：2024-05-19 07:21:32
  1. 事件绑定
  • 绑定

bind绑定；
catch绑定；（能阻止事件冒泡）
何为阻止事件冒泡？
---------------从而一并解决嵌套点击事件的冲突问题
小程序事件绑定、事件传参以及嵌套点击事件的冲突解决
需求：点击购物车商品加入购物车，点击条目进入商品详情

wxml

 <view class="goods" wx:for="{{goodsListCurrent.goods}}" wx:key="id" wx:for-item="item" data-id='{{item.id}}' bindtap="toDetailsTap">      ///  parent click
            ......
            <view class='soldInfo'>
              ......
               <wxc-icon size='40' type="{{'cart'}}" style='position:absolute;left:485rpx;margin-right:10rpx;' bindtap='clickCart'  >     ///  child click
               </wxc-icon>
            </view>
          </view>

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：取消触摸；
具体用法：

  <view class="nav box box-tb" bindtouchmove="touchmove" bindtouchcancel="touchcancel" bindtouchend="touchend">
    <view bindtap="tabLetter" data-index="{{item}}" wx:for="{{letters}}" wx:key="item" class="flex box box-align-center box-pack-center letter">
      <text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text>
    </view>
  </view>

然后在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"
<wxc-icon size='40' type="{{'cart'}}" style='position:absolute;left:485rpx;margin-right:10rpx;' data-name="haha" data-id="id" catchtap='clickCart' > </wxc-icon>

运行查看console
小程序事件绑定、事件传参以及嵌套点击事件的冲突解决
在js中，获取携带参数

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

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

相关文章