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