柚子快報激活碼778899分享:微信小程序之點擊事件
柚子快報激活碼778899分享:微信小程序之點擊事件
微信小程序中常用的點擊事件主要是?tap,但除此之外還有其他的觸摸類事件,用于不同的交互場景。以下是一些常見的點擊和觸摸相關(guān)的事件及其區(qū)別:
1、tap——最基本的點擊事件,適用于一般的輕觸交互,類似于 HTML 中的?click?事件。
Page({
handleTap: function(e) {
console.log('tap事件觸發(fā)');
}
})
2、bindtap——類似于?onTap,是另一種聲明點擊事件的方式,屬于數(shù)據(jù)綁定語法,也是最常見的綁定事件的方式。
Page({
buttonClicked: function(e) {
console.log('按鈕被點擊');
}
})
3、catchtap——有時候為了阻止事件冒泡,會使用?catchtap?事件,它在觸發(fā)后會阻止后續(xù)的 tap 事件繼續(xù)向上冒泡。
3.1.冒泡事件:
冒泡(Bubble)是一種事件傳播機制,在Web開發(fā)領(lǐng)域和微信小程序中廣泛存在。當用戶在一個頁面元素上觸發(fā)一個事件(比如點擊事件),這個事件不僅僅在這個元素上執(zhí)行相應(yīng)的處理函數(shù),還會按照DOM樹的層次結(jié)構(gòu),由內(nèi)向外逐級向上級元素傳播這個事件,直到頂層元素或者被明確阻止傳播為止。這個事件從子元素向父元素逐層傳遞的過程就像氣泡從水底升到水面一樣,因此得名“事件冒泡”。
在微信小程序中,事件冒泡的概念同樣適用。當你在一個嵌套結(jié)構(gòu)的組件中綁定事件時,如果子組件和父組件都綁定了同一類型的事件,那么當子組件觸發(fā)事件時,首先會在子組件上調(diào)用事件處理函數(shù),接著事件會沿組件層級向上冒泡,依次觸發(fā)父組件上同類型的事件處理函數(shù)。這有助于簡化事件處理邏輯,因為在父組件中可以集中處理多個子組件觸發(fā)的相同事件。
Page({
childTap: function(event) {
console.log('子組件的點擊事件被觸發(fā)');
},
parentTap: function(event) {
console.log('父組件的點擊事件被觸發(fā)');
}
});
這時候點擊子組件會發(fā)現(xiàn)控制臺輸出:
因為當點擊子組件時,會先執(zhí)行childTap函數(shù),然后事件冒泡到父組件并執(zhí)行parentTap函數(shù)。如果你不希望事件冒泡,可以使用catchtap來阻止事件的進一步冒泡。
4、longtap、touchstart、?touchmove、touchend
longtap長按事件,當用戶長按某個元素超過一定時間后觸發(fā)。touchstart、?touchmove、touchend觸摸相關(guān)事件,分別對應(yīng)手指觸摸屏幕開始、移動和離開屏幕的過程。用于實現(xiàn)拖拽、滑動等更復(fù)雜的交互行為
柚子快報激活碼778899分享:微信小程序之點擊事件
精彩內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。