前端实现点击外边关闭

关于点击弹框外部区域弹框关闭的交互处理（前端JS）

常见需求场景前端在处理交互的时候,经常遇到这样的场景,点击一个按钮,出现一个弹框,点击外部区域,弹框关闭. 解决方法思路说明: 1.给弹框的div父级都加个类名,如: 2.在document绑定一个点击事件,获取当前点击元素的类名,开始向上找,找它的父级类名, 2.1. 包含我们加的几个类名,则表示点击的是当前框,不处理: 2.2. 不包含我们加的几个类名,则是外部区域,关闭当前显示框: 代码实现 // 添加点击事件 document.addEventListener('click', e

android 点击屏幕关闭软键盘

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

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

使用js冒泡实现点击空白处关闭弹窗

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

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-

UITableView延伸：点击cell关闭键盘，加载不同cell,监听里面的textfeild内容改变

其实点击cell关闭键盘只要一句话 - () { cell = [tableView dequeueReusableCellWithIdentifier:){ cell = [tableView dequeueReusableCellWithIdentifier:@"cellID1"]; }else { cell = [tableView dequeueReusableCellWithIdentifier:@"cellI

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

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

div悬浮在屏幕的中间及点击按钮关闭弹出框

#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px 0 0 -50px; /*border: 1px solid red;*/ } <div id="fd"> </div> /*点击按钮关闭弹出框*/ <div class="close-btn" style=" backgrou

navigationcontroller和navigationbar和navigationitem之间的区别以及不用nib实现点击屏幕关闭虚拟键盘20130911

1.UIViewController UIView的关系. UIView是视图,UIViewController是视图控制器,两者之间是从属关系,当创建一个UIViewController的时候,一般UIViewController都会自带一个UIView就是UIViewController.UIView,一般我写不用nib创建的视图都是继承自UIViewController. 2.下面是讲的UITableViewController和UIViewController之间的区别 UITableV

HTML页面中点击按钮关闭页面几种方式与取消

1.不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" onclick="window.close();" /> 2.自定义提示关闭 <script language="javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ if(confirm(&

vue 点击按钮弹窗，点击关闭按钮关闭弹窗。

<div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div @click="hiddenShow()">关闭</div> </div> new Vue({ el: '', data: { show:false, }, mounted: function () { }, methods: { //点击弹窗 btnfc:

winfrom 捕获是否点击关闭按钮关闭的窗体

const int WM_SYSCOMMAND = 0x0112; const int SC_CLOSE = 0xF060; protected override void WndProc(ref Message msg) { if (msg.Msg == WM_SYSCOMMAND && ((int)msg.WParam == SC_CLOSE)) { // 点击winform右上关闭按钮

关于点击空白关闭弹窗的js写法推荐

$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理: 判断点击事件发生在区域外的条件是: 1. 点击事件的对象不是目标区域本身 2. 事件对象同时也不是目标区域的子元素 */

关于点击空白关闭弹窗的js写法推荐？

$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 ){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理: 判断点击事件发生在区域外的条件是: 1. 点击事件的对象不是目标区域本身 2. 事件对象同时也不是目标区域的子元素 */ $el_box = $('.box');//弹出层 $el_box.click(function(e){ e.stopPropagat

Js-Html 前端系列--点击非Div区域隐藏Div

最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择,但是要点击滚动条的时候会隐藏掉,也就是点击不了滚动条. 思路:写一个Document级别的事件,监听MouseDown事件,判断点击区域进行判断是否要隐藏这个下拉Div. JS版实现: $(document).bind('mousedown',function(event){ var $targ

【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'

js点击时关闭该范围下拉菜单之外的菜单

$(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest("#menu").length == 0 && $(e.target).closest("input").length == 0){ //点击id为menu之外且id,则触发 hideMenu(); } }) })

pyqt点击右上角关闭界面但是子线程仍在运行

现象: 通过右上角的叉关闭图形界面后,程序运行的子线程却不会被自动关闭,依然留存在系统中原因: 子线程没有正确关闭解决方法: 1.将子线程设置成守护线程 self.your_thread = threading.Thread(target=self.tcp_client_concurrency) # 设置线程为守护线程,防止退出主线程时,子线程仍在运行 self.your_thread.setDaemon(True) # 新线程启动 self.your_thread.start() 2.重构 d

在菜单栏对应图标点击右键-关闭窗口，javaw.exe进程未关闭。

问题: 可视化开发时,运行一个工程,总会生成一个javaw.exe进程. 关闭运行程序,javaw.exe还存在. 解决: 运行java工程时,会启动一个新的虚拟机来运行你的程序. 程序退出的时候,这些隔离的虚拟机也应该会自动终止的.在程序结束的时候没有System.exit(0),或者你的程序结束了以后后台还有非守护线程在运行,阻止了虚拟机的退出. 1.假如用了AWT/Swing的话,给主窗口添加WindowListener,监听windowClosing事件,里面加上System.exit(

前端 实现点击外边关闭

热门专题

前端实现点击外边关闭