使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡?
如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。自下而上的去触发事件。
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
html结构
<div <div <div <a div> div> div> |
4.Script
<script> $(function(){ document.getElementById("parent").addEventListener("click",function(e){ alert("我是最外层"); }); $(".layer-screen").click(function(e){ alert("我是中间层"); }); $("a").click(function(e){ alert("我是a标签"); }); }); script> |
5.执行结果
a) b) c) |
6.通过阻止事件冒泡实现点击空白处关闭弹窗
id=”parent”层作为屏蔽层,class="layer-screen"作为弹出层,给id=”parent”即最外层添加关闭弹窗的方法,给中间层和a标签绑定click事件,通过event.stopPropagation()停止事件的冒泡传递。 可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。默认为冒泡。 ele.addEventListener('click',doSomething2,true) |
7.阻止事件冒泡后的function
示例: //阻止事件冒泡 $("a").click(function(e){ alert("我是a标签"); e.stopPropagation(); }); |
8.执行结果
a) b) c) |
9.在id=”parent”层的绑定事件中添加关闭弹窗的方法即可。
10.事件捕获的测试
给a标签设置id=”a”,给中间层设置id=“center”,修改参数为true document.getElementById("parent").addEventListener("click",function(){ alert("我是最外层"); },true) document.getElementById("center").addEventListener("click",function(){ alert("我是中间层"); },true) document.getElementById("a").addEventListener("click",function(){ alert("我是a标签"); },true) |
执行结果:
点击a标签,弹出: 即与事件捕获的执行顺序相反。 |
(将所有的点击事件参数都改为true才会出现该效果)
使用js冒泡实现点击空白处关闭弹窗的更多相关文章
- 【vue】vue +element 搭建项目,点击空白处关闭弹窗
<template> <div class="step2"> <el-button @click="togglePanel($event)& ...
- jqeury点击空白关闭弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 温故而知新 js 点击空白处关闭气泡
诀窍1:使用el.contains(e) 来判断点击的区域诀窍2:使用mouseup 诀窍3:完成之后,移除事件 showpopover (e) { this.popover = !this.popo ...
- 关于点击空白关闭弹窗的js写法推荐?
$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 ){ // Mark 1 some code... // 功能代码 ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
- 关于点击空白关闭弹窗的js写法推荐
$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && ...
- bootstrap禁用点击空白处关闭模态框
原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html
- vue 点击按钮弹窗,点击关闭按钮关闭弹窗。
<div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...
- js点击空白处触发事件
我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...
随机推荐
- 在CentOS 7+ 安装Kubernetes入门(单Master)
TL;DR; ***,***,***,重要的事情说三次.如果不会***,这篇文章就没有看下去的意义.作为一个技术人员如果不愿意折腾,很难有所作为.作为一个单纯的技术人员,最好把心思放在技术上,做到真正 ...
- 【译】学习JavaScript中提升、作用域、闭包的终极指南
这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文.通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包.考虑到这一点,究竟什么是"执 ...
- 前端本地存储localStorage
1.突破cookie 4K限制,一般浏览器支持5M 2.增 删 改 查 <!DOCTYPE html> <html lang="en"> <head& ...
- appstore跳转
二维码跳转 https://itunes.apple.com/cn/app/id123123123 应用内跳转 this.alertCtrl.create({ title: '更新', message ...
- Python Web开发问题收集(二)
- Codeforces 1139D Steps to One dp
Steps to One 啊, 我要死了, 这种垃圾题居然没写出来, 最后十分钟才发现错在哪. 不知道为什么我以为 对于一个数x , 除了它的因子和它的倍数都是和它互质的, 我脑子是抽了吗? 随便瞎d ...
- NOIP2017提高组Day1T3 逛公园 洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划 最短路 拓扑序
原文链接https://www.cnblogs.com/zhouzhendong/p/9258043.html 题目传送门 - 洛谷P3953 题目传送门 - Vijos P2030 题意 给定一个有 ...
- AtCoder Regular Contest 100 (ARC100) E - Or Plus Max 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/9251448.html 题目传送门 - ARC100E 题意 给定一个正整数 $n(n\leq 18)$. 然后 ...
- day60 pymysql
预知扩展内容,详见地址如下(关于数据库备份和恢复) http://www.cnblogs.com/linhaifeng/articles/7525619.html 我们一般写程序都是在py文件里面,那 ...
- Maya cmds pymel 单位和轴向设置
Maya cmds pymel 单位和轴向设置 import maya.cmds as cmds # 1. to make the Y-axis of the world to be the up a ...