Vue js 实现点击页面空白处隐藏指定div

<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 js 实现点击页面空白处隐藏指定div相关推荐

jquery让html页面空白页,jquery实现点击页面空白隐藏指定菜单
mongodb防火墙配置 http://ruby-china.org/topics/20128 https://docs.mongodb.com/manual/tutorial/configure-l ...
qtreewidget点击空白处时取消以选项_VUE+elementUI 点击页面空白处弹窗不隐藏
点击空白处不隐藏弹窗,点击弹窗里的'x'和取消按钮关闭弹窗. os:人家都是让点击空白处隐藏弹窗,为啥我们的需求有点另类?!木有办法~大佬有需求,小小程序员只能领命... 话说,element的el- ...
点击页面空白处就关闭某个层是怎么做到的
如果用document事件的话,那点那个层里面也会触发,这不是想要的结果,怎么能做到点击除了那个层内部的区域外的任何地方,就触发事件 --------------------------------- ...
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...
Android 点击屏幕空白处隐藏软键盘
前言最近在重构老项目把之前的拍照功能也搬过来了在输入打卡号的时候软键盘一直在打开着点签到按钮很麻烦所以想实现点击屏幕空白处隐藏软键盘!! 封装工具据传入控件的坐标和用户的焦点坐标,判 ...
html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色适时切换网页指定区域背景颜色请选择背景: function g ...
将页面中的指定 div 下载为图片
文章目录 1. 下载页面div为本地图片 2. 下载页面 div 为本地图片并添加水印 1. 下载页面div为本地图片要将页面中的指定 div 下载为图片,可以使用 JavaScript 的 htm ...
原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
使用ASP.NE+VUE开发一款简单记账WebAPP之七（vue.js构建记账统计页面）
转载地址https://blog.csdn.net/yiershan1314/article/details/77970713 一.添加两个新页面 /components/ MonthCount.vu ...

Vue js 实现点击页面空白处隐藏指定div

Vue js 实现点击页面空白处隐藏指定div

Vue js 实现点击页面空白处隐藏指定div相关推荐

最新文章

热门文章