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 继承机制实例
Aug 12 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python高级property属性用法实例分析
2019/11/19 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
文明礼仪小标兵事迹
2014/01/12 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
超市促销活动方案
2014/03/05 职场文书
同居协议书范本
2014/04/23 职场文书
合作意向书
2014/07/30 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
故意伤害辩护词
2015/05/21 职场文书
法院答辩状格式
2015/05/22 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书