点击事件bindtap|catchtap · 小程序

[TOC] ## 1.bindtap ~~~ <button bindtap='ClickNmae'>点击触发事件</button> ~~~ eg: 两个页面之间的跳转创建好的两个页面分别为index和welcome，在welcome有个控件button，通过点击button可以跳转到index ~~~ <button bindtap='handleClick'>跳转到index</button> // 在welcome的js下写handleClick方法 handleClick(){ // navigateTo()跳转到应用内的某个页面，还可以再返回本页面 // redirectTo()关闭当前页面跳转到应用内的某个页面 wx.navigateTo({ url: '/pages/index/index' }); } ~~~ ## 2.catchtap 使用方法与bindtap一样 ## 3.两者之间的区别 > 冒泡事件：点击子组件时，父组件的事件也会触发 * **bindtap事件绑定不会阻止冒泡事件向上冒泡 ,catchtap事件绑定可以阻止冒泡事件向上冒泡** ## 4.target与currentTarget * target：触发事件的元素。currentTarget：事件绑定的元素。 * currentTarget始终是监听事件者，而target是事件的真正发出者 ### 1.小程序经典冒泡案例：在index.wxml里写parent和child ~~~  <view class="parent" catchtap="click" data-title="点击了parent"> <view class="child" bindtap="click" data-title="点击了child"></view> </view> ~~~ 在index.js里定义点击事件输出值类型为target时 ~~~ Page({ click(event){ console.log(event.target.dataset.title); /* 点击父元素时输出：点击了parent;点击子元素时输出:点击了child(输出了两次) */ /* 分析：因为target为触发事件时的元素，而点击child的同时parent点击事件内触发事件的元素为child，所以这里会输出两次child */ } }) ~~~ 在index.js里定义点击事件输出值类型为currentTarget时 ~~~ Page({ click(event){ console.log(event.currentTarget.dataset.title); /* 点击父元素时输出：点击了parent;点击子元素时输出:点击了child 点击了parent */ /* 分析：因为currentTarget为事件绑定的元素，而点击child的同时parent点击事件绑定的是其本身，所以这里会输出child和parent */ } }) ~~~ ### 2.因为点击事件冒泡事件为向上发生，而catchtap事件会阻止冒泡事件向上发生，所以本例中当子元素绑定catchtap事件时点击子元素都不会触发父元素事件 ~~~  <view class="parent" bindtap="click" data-title="点击了parent"> <view class="child" catchtap="click" data-title="点击了child"></view> </view> ~~~ 在index.js里定义点击事件输出值类型为target时 ~~~ Page({ click(event){ console.log(event.target.dataset.title); /* 点击父元素时输出：点击了parent;点击子元素时输出:点击了child */ } }) ~~~ 在index.js里定义点击事件输出值类型为currentTarget时 ~~~ Page({ click(event){ console.log(event.currentTarget.dataset.title); /* 点击父元素时输出：点击了parent;点击子元素时输出:点击了child*/ } }) ~~~