簡(jiǎn)單了解微信小程序 e.target與e.currentTarget的不同
更新時(shí)間：2019年09月27日 15:29:57 作者：不睡
這篇文章主要介紹了微信小程序 e.target與e.currentTarget的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
在小程序的點(diǎn)擊事件中，我們經(jīng)常使用這兩個(gè)屬性來(lái)傳參，看起來(lái)效果一樣，查了官方文檔如下：
target：事件源組件對(duì)象
currentTarget：當(dāng)前組件對(duì)象
什么意思？我剛開始就有點(diǎn)不懂，那就直接上代碼：
<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)
},
結(jié)果如下:
點(diǎn)擊子元素inner，但由于事件冒泡父元素middle和outter都觸發(fā)，從上圖中我們可以看出區(qū)別：
父元素middle和outter，target的id都是等于inner(子元素的id)；
middle的currentTarget的id是middle，outter的currentTarget的id是outter；
總結(jié)：
target：事件源組件對(duì)象(事件冒泡源頭)
currentTarget：當(dāng)前組件對(duì)象(就是當(dāng)前對(duì)象)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家分享了關(guān)于js取小數(shù)點(diǎn)后兩位四種方法和實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-01-01
js中split()方法得到的數(shù)組長(zhǎng)度問(wèn)題
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。這篇文章給大家介紹js中split()方法得到的數(shù)組長(zhǎng)度問(wèn)題，感興趣的朋友一起看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)年歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript的History API使搜索引擎抓取AJAX內(nèi)容
這篇文章主要介紹了JavaScript的History API使搜索引擎抓取AJAX內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript中判斷函數(shù)、變量是否存在,本文給出了多個(gè)判斷函數(shù)是否存在的方法,并分別給出代碼實(shí)例,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JS判斷非空至少輸入兩個(gè)字符的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了JS判斷非空至少輸入兩個(gè)字符的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
javascript獲取當(dāng)前的時(shí)間戳的方法匯總
這篇文章主要介紹了javascript獲取當(dāng)前的時(shí)間戳的方法匯總的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了淺談Webpack下多環(huán)境配置的思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
微信小程序 wx.getUserInfo引導(dǎo)用戶授權(quán)問(wèn)題實(shí)例分析
這篇文章主要介紹了微信小程序 wx.getUserInfo引導(dǎo)用戶授權(quán)問(wèn)題,結(jié)合實(shí)例形式分析了微信小程序使用wx.getUserInfo引導(dǎo)用戶授權(quán)問(wèn)題的具體操作步驟與實(shí)現(xiàn)方法,需要的朋友可以參考下2020-03-03