微信小程序中冒泡事件的示例分析

這篇文章主要介紹微信小程序中冒泡事件的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶(hù)提供專(zhuān)業(yè)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性?xún)r(jià)比高，為金融證券行業(yè)簡(jiǎn)陽(yáng)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專(zhuān)業(yè)成都idc公司。

在微信小程序的事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

WXML的冒泡事件列表：

類(lèi)型	觸發(fā)條件	最低版本
touchstart	手指觸摸動(dòng)作開(kāi)始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開(kāi)
longpress	手指觸摸后，超過(guò)350ms再離開(kāi)，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)	1.5.0
longtap	手指觸摸后，超過(guò)350ms再離開(kāi)（推薦使用longpress事件代替）
transitionend	會(huì)在 WXSS transition 或 wx.createAnimation 動(dòng)畫(huà)結(jié)束后觸發(fā)
animationstart	會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)
animationiteration	會(huì)在一個(gè) WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)
animationend	會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)完成時(shí)觸發(fā)
touchforcechange	在支持 3D Touch 的 iPhone 設(shè)備，重按時(shí)會(huì)觸發(fā)	1.9.90

注：除上表之外的其他組件自定義事件如無(wú)特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(詳見(jiàn)各個(gè)組件)

事件綁定

以bind或catch開(kāi)頭，然后跟上事件的類(lèi)型，如bindtap、catchtouchstart。自基礎(chǔ)庫(kù)版本 1.5.0 起，在非原生組件中，bind和catch后可以緊跟一個(gè)冒號(hào)，其含義不變，如bind:tap、catch:touchstart。

事件冒泡的條件：父元素與子元素綁定同一類(lèi)事件并且子元素的綁定方式是bind（catch開(kāi)頭會(huì)阻止事件冒泡），代碼如下：

<view id="outter" bindtap="tap1">
  outer view
  <view id="middle" bindtap="tap2">
   middle view
   <view id="inner" bindtap="tap3">
    inner view
   </view>
  </view>
</view>

tap1: function (e) {
　　console.log(1, e)
},
tap2: function (e) {
　　console.log(2, e)
},
tap3: function (e) {
　　console.log(3, e)
},

點(diǎn)擊id為inner的元素，同時(shí)也觸發(fā)了id為middle和outter的元素

把inner的bindtap改成catchtap就會(huì)阻止事件冒泡

以上是“微信小程序中冒泡事件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱(chēng)：微信小程序中冒泡事件的示例分析
標(biāo)題網(wǎng)址：http://muchs.cn/article42/isjpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、小程序開(kāi)發(fā)、做網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)