Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素(實(shí)現(xiàn)思路)

更新時(shí)間：2019年12月04日 08:51:26 作者：神奇的程序員

這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素，文中給大家擴(kuò)展了vue實(shí)現(xiàn)點(diǎn)擊其他地方隱藏div的三種方法,需要的朋友可以參考下

1. 綁定元素

2. mounted生命周期

3. 實(shí)現(xiàn)思路

頁(yè)面掛載完后，監(jiān)聽(tīng)全局點(diǎn)擊事件
獲取當(dāng)前點(diǎn)擊的元素，根據(jù)需求獲取當(dāng)前元素本身的屬性
判斷當(dāng)前點(diǎn)擊元素與要隱藏的元素是否相同
當(dāng)前點(diǎn)擊元素與要隱藏的元素不相同則隱藏

4. 最終效果

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

方法：

步驟1：給頁(yè)面最外出的元素div加點(diǎn)擊事件：@click=“popShow = false”。

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

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

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

方法一：　　

　　通過(guò)監(jiān)聽(tīng)事件

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

方法二（比較好）：

　　給最外層的div加個(gè)點(diǎn)擊事件 @click="userClick=false"

　　給點(diǎn)擊的元素上面加上：@click.stop="userClick=!userClick"

方法三：

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

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

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

</div>
<template>

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

}
</script>

小結(jié)：

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

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

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

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前元素以外的地方隱藏當(dāng)前元素，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: