vue.js click點(diǎn)擊事件獲取當(dāng)前元素對(duì)象的操作
Vue.js可以傳遞$event對(duì)象
<body id="app">
<ul>
<li v-on:click="say('hello!', $event)">點(diǎn)擊當(dāng)前行文本</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
say: function(msg, event) {
//獲取點(diǎn)擊對(duì)象
var el = event.currentTarget;
alert("當(dāng)前對(duì)象的內(nèi)容："+el.innerHTML);
}
}
})
</script>
</body>
| 屬性 | 描述 |
|---|---|
| bubbles | 返回布爾值，指示事件是否是起泡事件類(lèi)型。 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。 |
| currentTarget | 返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素。 |
| eventPhase | 返回事件傳播的當(dāng)前階段。 |
| target | 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。 |
| timeStamp | 返回事件生成的日期和時(shí)間。 |
| type | 返回當(dāng)前 Event 對(duì)象表示的事件的名稱(chēng)。 |
currentTarget：currentTarget 事件屬性返回其監(jiān)聽(tīng)器觸發(fā)事件的節(jié)點(diǎn)，即當(dāng)前處理該事件的元素、文檔或窗口。
通俗一點(diǎn)說(shuō)，就是你的點(diǎn)擊事件綁定在哪一個(gè)元素上，currentTarget獲取到的就是哪一個(gè)元素。
target：target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。
通俗一點(diǎn)說(shuō)，就是你當(dāng)前點(diǎn)擊的是哪一個(gè)元素，target獲取到的就是哪一個(gè)元素。
<li v-for="img in willLoadImg" @click="selectImg($event)">
<img class="loadimg" :src="img.url" :data-id="img.id" alt="">
</li>
methods: {
selectImg(event) {
console.log(event.currentTarget);
console.log(event.target);
}
}
補(bǔ)充知識(shí)：vue獲取當(dāng)前點(diǎn)擊對(duì)象的下標(biāo)，和當(dāng)前點(diǎn)擊對(duì)象的內(nèi)容
<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>
data里面聲明：
data() {
return {
tabList: [
{ id: 0, title: "首頁(yè)1" },
{ id: 1, title: "首頁(yè)2" },
{ id: 2, title: "首頁(yè)3" }
],
current:0
};
},
methods: {
addClass: function(index,event) {
this.current = index;
//獲取點(diǎn)擊對(duì)象
var el = event.currentTarget;
console.log("當(dāng)前對(duì)象的內(nèi)容："+el.innerHTML);
console.log(this.current)
}
以上這篇vue.js click點(diǎn)擊事件獲取當(dāng)前元素對(duì)象的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解讀element ui el-row標(biāo)簽中的gutter用法
這篇文章主要介紹了解讀element ui el-row標(biāo)簽中的gutter用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
關(guān)于Vue的 watch、computed和methods的區(qū)別匯總
這篇文章主要介紹關(guān)于Vue的 watch、computed和methods的區(qū)別，下面文章將圍繞Vue的 watch、computed和methods的續(xù)航管資料展開(kāi)全文它們之間區(qū)別的內(nèi)容,需要的朋友可以參考一下，希望能幫助到大家2021-11-11
這篇文章主要介紹了vue中使用swiper失效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue表格組件Vxe-table使用技巧的相關(guān)資料,文中還介紹了VXEtable展示指定行所遇到得問(wèn)題,對(duì)大家學(xué)習(xí)或者使用Vxe-table具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案
這篇文章主要介紹了Vue elementui字體圖標(biāo)顯示問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
vue仿網(wǎng)易云音樂(lè)播放器界面的簡(jiǎn)單實(shí)現(xiàn)過(guò)程
興趣乃學(xué)習(xí)的動(dòng)力,想自己動(dòng)手寫(xiě)個(gè)音樂(lè)播放器,查了網(wǎng)上一些博客寫(xiě)了一個(gè),這篇文章主要給大家介紹了關(guān)于vue仿網(wǎng)易云音樂(lè)播放器界面的簡(jiǎn)單實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2021-11-11
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
vant的Loading加載動(dòng)畫(huà)組件的使用(通過(guò)接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動(dòng)畫(huà)組件的使用,通過(guò)接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07