Vue怎么實現(xiàn)點擊當(dāng)前元素以外的地方隱藏當(dāng)前元素

小編給大家分享一下Vue怎么實現(xiàn)點擊當(dāng)前元素以外的地方隱藏當(dāng)前元素，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)自2013年起，先為臨城等服務(wù)建站，臨城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為臨城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1. 綁定元素

2. mounted生命周期

3. 實現(xiàn)思路

• 頁面掛載完后，監(jiān)聽全局點擊事件

• 獲取當(dāng)前點擊的元素，根據(jù)需求獲取當(dāng)前元素本身的屬性

• 判斷當(dāng)前點擊元素與要隱藏的元素是否相同

• 當(dāng)前點擊元素與要隱藏的元素不相同則隱藏

4. 最終效果

接著看下vue實現(xiàn)點擊目標(biāo)元素外頁面的其他地方隱藏彈窗

方法：

步驟1：給頁面最外出的元素div加點擊事件：@click=“popShow = false”。

步驟2：給點擊目標(biāo)元素加點擊事件：@click=“popShow = true”。

備注：popShow 為控制彈窗顯示與隱藏的標(biāo)志。

PS：下面看下vue實現(xiàn)點擊其他地方隱藏div

方法一：　　

通過監(jiān)聽事件

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

方法二（比較好）：

給最外層的div加個點擊事件 @click="userClick=false"

給點擊的元素上面加上：@click.stop="userClick=!userClick"

方法三：

<template>
<!--向頁面添加關(guān)閉div的事件監(jiān)聽-->
<div class="page" @click="hide">

<!--添加.stop防止page的點擊事件觸發(fā)，導(dǎo)致無法顯示div-->
<button @click.stop="show">點擊顯示div</button>

<!--指定的div。添加.stop防止點擊div內(nèi)的元素時，整個div被關(guān)閉-->
<div @click.stop>
...
</div>

</div>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

小結(jié)：

通過vue.js 事件的.stop修飾符可以阻止事件繼續(xù)冒泡傳播，也可以使用原生js事件的event.stopPropagation()方法。

通過向指定的div添加.stop，可以實現(xiàn)只有點擊非該div內(nèi)的元素時，才會往上冒泡至page，從而實現(xiàn)點擊其他地方隱藏div。

要向觸發(fā)顯示div的按鈕添加.stop，否則一點擊按鈕，觸發(fā)show()之后傳播到page，立馬就會觸發(fā)hide()，div就無法顯示。

以上是“Vue怎么實現(xiàn)點擊當(dāng)前元素以外的地方隱藏當(dāng)前元素”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：Vue怎么實現(xiàn)點擊當(dāng)前元素以外的地方隱藏當(dāng)前元素
分享網(wǎng)址：http://muchs.cn/article20/ijdjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、服務(wù)器托管、全網(wǎng)營銷推廣、App設(shè)計、靜態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)

廣告

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