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

  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 clickbindtap='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.csdn.net/julystroy/article/details/86483035

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值