Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)


Posted in Javascript onDecember 04, 2019

1. 绑定元素

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

2. mounted生命周期

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

3. 实现思路

  • 页面挂载完后,监听全局点击事件
  • 获取当前点击的元素,根据需求获取当前元素本身的属性
  • 判断当前点击元素与要隐藏的元素是否相同
  • 当前点击元素与要隐藏的元素不相同则隐藏

4. 最终效果

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

接着看下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实现点击当前元素以外的地方隐藏当前元素,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python数据可视化之画图
2019/01/15 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python支持多线程的爬虫实例
2019/12/21 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
通用自荐信范文
2014/03/14 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
收入证明申请书
2015/06/12 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript