vue 点击空白处关闭

2024-10-19

实例：vue中点击空白区域关闭某个div图层

<template> <div class="search" ref="searchMain"> <el-input v-model="value" placeholder="请输入搜索内容" ref="input" @focus="getFocus" @input="changeVal" @clear='clearCard' @blur

什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window).自下而上的去触发事件. 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. html结构 <div class="screen" id="parent"> <div c

vue中点击空白处隐藏弹框（用指令优雅地实现）

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> cons

【vue】vue +element 搭建项目，点击空白处关闭弹窗

<template> <div class="step2"> <el-button @click="togglePanel($event)">点击</el-button> <div class="shaw-box" v-if="visible" ref="main">弹出层</div> </div> </templat

温故而知新 js 点击空白处关闭气泡

诀窍1:使用el.contains(e) 来判断点击的区域诀窍2:使用mouseup 诀窍3:完成之后,移除事件 showpopover (e) { this.popover = !this.popover var closePopover = (event) => { if (!this.$refs.popover.contains(event.target)) { this.popover = false document.body.removeEventListener('mouseup'

bootstrap禁用点击空白处关闭模态框

原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html

js点击空白处触发事件

我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;background-color: red;"></div> js代码 $(document).mouseup(function(e) { var _con = $('.aa'); // 设置目标区域 if (!_con.is(e.target) && _con.has(e.targ

Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能

其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件监听该事件就能实现点击空白处关闭窗口的功能 this.addEventListener("mouseDownOutside",mouseDownOutside_Handler); private function mouseDownOutside_Handler(event:Event):void { PopUpManager.removePopUp(this)

阻止Bootstrap 模态框（Modal）点击空白处时关闭

默认情况下点击空白处时会关闭模态框,添加data-backdrop="static"后可以阻止关闭

Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监

BootstrapDialog点击空白处禁止关闭

在乐学一百的项目当中引用到了BootstrapDialog,其中后台发送短信时,为了防止管理员编辑了半天的短息,突然间因为点击某个空白区域导致丢失,所以在此禁用掉点击空白关闭弹出框. 主要属性为: closable: false, BootstrapDialog.show({ 2 title: '一键群发', 3 message: html, type: BootstrapDialog.TYPE_DEFAULT, closable: false, cssClass: 'dialog_mar',

【Flutter 实战】全局点击空白处隐藏键盘

老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 TextField 添加 focusNode,点击空白处时使 TextField 失去焦点,实现如下: class DismissKeyboardDemo extends StatelessWidget { final FocusNode focusNode = FocusNode(); @overr

Android点击空白处，隐藏软键盘

在做登陆或者注册的时候,软键盘经常可能会挡住一些界面.我们需要在输入完成之后隐藏软键盘. 在我们点击空白处或者非EditText的地方来隐藏软键盘. public class HomeActivity extends Activity { ...... @Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { // 获得当前得到焦点的

android 点击屏幕关闭软键盘

//点击屏幕关闭输入弹出框 @Override public boolean onTouchEvent(MotionEvent event) { InputMethodManager im = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); im.hideSoftInputFromWindow(getCurrentFocus().getApplicationWindowToken(), InputMetho

popupwindow点击空白处如何自动消失？

Popupwindow如果需要点击空白处自动消失,需要设置两个函数 1.customPopWindow.setFocusable(true);该函数也可以在构造函数中设置,如:mPopupWindow = new PopupWindow(popunwindwow,LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT,true);最后一个参数true即为设定Focusable属性. 2.customPopWindow.setBackgroundDr

lhgdialog在打开的窗口里点击按钮关闭当前窗口

lhgdialog在打开的窗口里点击按钮关闭当前窗口 var api = frameElement.api, W = api.opener; api.close();

Android点击View显示PopupWindow，再次重复点击View关闭PopupWindow

Android点击View显示PopupWindow,再次重复点击View关闭PopupWindow 这本身是一个看似很简单的问题,但是如果设置不当,就可能导致莫名其妙失效问题.通常在Android中使用PopupWindow是从某一个View中触发,为某一个View setOnClickListener,然后在View.OnClickListener中show出创建好的PopupWindow,比如下图右侧的"筛选"部位View,此图为用户点击筛选后弹出的PopupWindo

IOS 点击空白处隐藏键盘的几种方法

IOS 点击空白处隐藏键盘的几种方法 IOS7 点击空白处隐藏键盘的几种方法 IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们可以实现点击键盘以外的空白区域来将键盘隐藏,以下我总结出了几种隐藏键盘的方法: 首先说明两种可以让键盘隐藏的Method: 1.[view endEditing:YES] 这个方法可以让整个view取消第一响应者,从而让所有控件的键盘隐藏. 2.[te

IOS7 点击空白处隐藏键盘的几种方法

IOS7 点击空白处隐藏键盘的几种方法 iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们可以实现点击键盘以外的空白区域来将键盘隐藏,以下我总结出了几种隐藏键盘的方法: 首先说明两种可以让键盘隐藏的Method: 1.[view endEditing:YES] 这个方法可以让整个view取消第一响应者,从而让所有控件的键盘隐藏. 2.[textFiled resignFirstResp

vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

点击当前标签给其添加class,兄弟标签class删除然后获取当前点击元素的文字演示地址: https://xibushijie.github.io/static/addClass.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue 点击当前元素添加class 去掉兄弟的class</title> <script src

jqeury点击空白关闭弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-