- 事件绑定
- 绑定
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.csdn.net/julystroy/article/details/86483035