vue2 点击空白处关闭

2024-09-03

实例：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 +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"后可以阻止关闭

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

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-

react 点击空白处隐藏弹出层

点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡即可. class Select extends Component { constructor(props) { super(props); this.state = { selected: props.list[0], showList: false }; this.showList = thi

IOS Swift UITableViewcontroller实现点击空白处隐藏键盘

在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹出一个键盘,我们需要点击空白处就隐藏键盘,这时候大家可能想到的事在UITableViewcontroller中重写touchesBegan方法,但是发现这个方法并没有响应,我猜想可能是被屏蔽了,那我们该怎么做呢?下面我说一下实现思路: 1.自定义一个类继承UITableView然后重新touches

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

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