Vue怎么实现点击当前元素以外的地方隐藏当前元素

小编给大家分享一下Vue怎么实现点击当前元素以外的地方隐藏当前元素，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联自2013年起，先为临城等服务建站，临城等地企业，进行企业商务咨询服务。为临城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1. 绑定元素

2. mounted生命周期

3. 实现思路

• 页面挂载完后，监听全局点击事件

• 获取当前点击的元素，根据需求获取当前元素本身的属性

• 判断当前点击元素与要隐藏的元素是否相同

• 当前点击元素与要隐藏的元素不相同则隐藏

4. 最终效果

接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗

方法：

步骤1：给页面最外出的元素div加点击事件：@click=“popShow = false”。

步骤2：给点击目标元素加点击事件：@click=“popShow = true”。

备注：popShow 为控制弹窗显示与隐藏的标志。

PS：下面看下vue实现点击其他地方隐藏div

方法一：　　

通过监听事件

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

方法二（比较好）：

给最外层的div加个点击事件 @click="userClick=false"

给点击的元素上面加上：@click.stop="userClick=!userClick"

方法三：

<template>
<!--向页面添加关闭div的事件监听-->
<div class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示div-->
<button @click.stop="show">点击显示div</button>

<!--指定的div。添加.stop防止点击div内的元素时，整个div被关闭-->
<div @click.stop>
...
</div>

</div>
<template>

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

}
</script>

小结：

通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播，也可以使用原生js事件的event.stopPropagation()方法。

通过向指定的div添加.stop，可以实现只有点击非该div内的元素时，才会往上冒泡至page，从而实现点击其他地方隐藏div。

要向触发显示div的按钮添加.stop，否则一点击按钮，触发show()之后传播到page，立马就会触发hide()，div就无法显示。

以上是“Vue怎么实现点击当前元素以外的地方隐藏当前元素”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享名称：Vue怎么实现点击当前元素以外的地方隐藏当前元素
分享网址：https://www.cdcxhl.com/article20/ijdjco.html

成都网站建设公司_创新互联，为您提供营销型网站建设、服务器托管、全网营销推广、App设计、静态网站、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联