[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 ~~~ <!-- "pages/index/index.js" --> <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事件時點擊子元素都不會觸發父元素事件 ~~~ <!-- "pages/index/index.js" --> <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*/ } }) ~~~