事件冒泡 & 阻止事件冒泡
事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
事件函数绑定:
//oDiv1.onclick = fn1; 给oDiv加点击事件,给事件绑定一个函数。
<script>
window.onload = function() { var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev) {
var ev = ev || event; ev.cancelBubble = true; //阻止当前对象的当前事件的冒泡 oDiv.style.display = 'block';
}; document.onclick = function() {
oDiv.style.display = 'none';
} }
</script>
===================================================================== 以下是利用事件冒泡机制的例子:
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body> <style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style> <script>
window.onload = function() { var oDiv = document.getElementById('div1'); //只给父级div1添加事件函数,这样子级触发事件的时候也会执行父级的函数
oDiv.onmouseover = function() {
this.style.left = '0px';
} oDiv.onmouseout = function() {
this.style.left = '-100px';
} }
</script>
事件冒泡 & 阻止事件冒泡的更多相关文章
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)
闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...
- jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
- javascript - 事件详解(阻止事件冒泡+阻止事件行为)
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- javascript里阻止事件冒泡
如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
- js 事件流和事件冒泡阻止
js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
随机推荐
- 【Codeforces 757B】 Bash's big day
[题目链接] 点击打开链接 [算法] 若gcd(s1,s2,s3....sk) > 1, 则说明 : 一定存在一个整数d满足d|s1,d|s2,d|s3....,d|sk 因为我们要使|s|尽可 ...
- fastText(二):微博短文本下fastText的应用(一)
众所周知,微博中的内容以短文本居多,文本内容随意性极强,这给建模增加了很大的难度.针对这一问题,这里分享一下fastText在微博短文本的应用. 任务目标简单介绍一下整个任务的目标:给微博内容打上标签 ...
- 【旧文章搬运】ZwQuerySystemInformation枚举内核模块及简单应用
原文发表于百度空间,2008-10-24========================================================================== 简单说,即 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 07. View的Model 和 Tag Helpers
student添加一个属性BirthDate 然后把生成数据的地方,字段也加上 建立ViewModel list转换为ViewModel 进一步改进代码 StudentViewModel HomeIn ...
- P5024 保卫王国
传送门 我现在还是不明白为什么NOIPd2t3会是一道动态dp-- 首先关于动态dp可以看这里 然后这里就是把把矩阵给改一改,改成这个形式\[\left[dp_{i-1,0},dp_{i-1,1}\r ...
- P3007 [USACO11JAN]大陆议会The Continental Cowngress(2-SAT)
简述:给出 n 个法案, m 头牛的意见, 每头牛有两个表决 格式为 “支持或反对某法案”, 每头牛需要至少满足一个表决, 不可能成立的话输出 IMPOSSIBLE, 否则输出方案, Y代表能, N代 ...
- (7)javascript的程序控制结构及语句------(2)循环控制语句、跳转语句、对话框
一.循环控制语句 循环语句主要就是在满足条件的情况下反复执行某一个操作,循环控制语句主要包括while语句.do...while语句 和for语句. 1.While语句 语法: While(条件表达式 ...
- Luogu P1663 山【二分答案/实数域】By cellur925
题目传送门 现在要在山上的某个部位装一盏灯,使得这座山的任何一个部位都能够被看到. 给出最小的y坐标,如图的+号处就是y坐标最小的安装灯的地方. 这个题嘛...今年省选前学姐来我们(破烂)的机房串门的 ...
- 关于${pageContext.request.contextPath}的理解(转载)
${pageContext.request.contextPath}是JSP取得绝对路径的方法,等价于<%=request.getContextPath()%> . 也就是取出部署的应用程 ...
- Ubuntu 18.04 LTS 安装过程
电脑: acer 1. F12开启boot menu,如果没开启,F2进去开启 2. 早点插优盘,否则进入F12的时候检测不出来,选择U盘启动,先不安装试用,进入桌面后有安装文件再安装,想直接安应该也 ...