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 相关文章推荐
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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
CI框架整合smarty步骤详解
2016/05/19 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
python类继承用法实例分析
2014/10/10 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
档案检查欢迎词
2014/01/13 职场文书
诉前财产保全担保书
2014/05/20 职场文书
企业宣传工作方案
2014/06/02 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
大学生党性分析材料
2014/12/19 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
Python源码解析之List
2021/05/21 Python
QT与javascript交互数据的实现
2021/05/26 Javascript