js时间冒泡,阻止事件冒泡
首先解释一下事件冒泡神什么,
在js中,假如在div中嵌套一个div
如
<style type="text/css">
#box1{width:500px;height:500px;background:#900;}
#box2{width:400px;height:400px;background:#090;}
#box3{width:300px;height:300px;background:#009;}
#box4{width:200px;height:200px;background:#990;}
#box5{width:100px;height:100px;background:#099;}
</style> <body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
</div>
</div>
</div>
</div>
</div> </body>
当你用onclick事件时,当你点击id=‘box4’的div,事件会一直传递到box3,box2,box1,html
这就叫事件的冒泡,有时候不需要冒泡,所以会阻止冒泡。
<script>
window.onload =function()
{
var $=function(_id){return document.getElementById(_id);}
document.onclick=function()
{
alert("点击的document");
}
document.body.onclick=function()
{
alert("点击的body");
}
$("box1").onclick=function()
{
alert("你点击的id为:"+this.id +"的div");
}
$("box2").onclick=function()
{
alert("你点击的id为:"+this.id +"的div");
}
$("box3").onclick=function(e)
{
e=window.event || e; //IE支持的是windows事件,而标准e事件是chromo额firefox支持
e.stopPropagation(); //阻止冒泡的方法,而ie不支持這个方法,但支持cancelBubble属性
alert("你点击的id为:"+this.id +"的div");
}
$("box4").onclick=function(e)
{
//全浏览器兼容的阻止冒泡
e=e ||window.event ;
e.stopPropagation?(stopPropagation()):(e.cancelBubble=true);
alert("你点击的id为:"+this.id +"的div"); }
$("box5").onclick=function()
{
alert("你点击的id为:"+this.id +"的div");
}
}
</script>
firefox,chrome中用的是
stopPropagation()函数来阻止冒泡 ie用的是cancelBubble=ture;這个属性来阻止冒泡
js时间冒泡,阻止事件冒泡的更多相关文章
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- 事件冒泡 & 阻止事件冒泡
事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = ...
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
- JS阻止事件冒泡
在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
随机推荐
- CXF超时设置
转自: http://peak.iteye.com/blog/1285211 http://win.sy.blog.163.com/blog/static/9419718620131014385644 ...
- SVN服务器几种备份策略---重点svnsync备份---OK
配置管理的一个重要使命是保证数据的安全性,防止服务器应硬盘损坏.误操作造成数据无法恢复的灾难性后果.因此制定一个完整的备份策略非常重要. 一般来说,备份策略应规定如下几部分内容:备份频度.备份方式.备 ...
- OpenCV中Delaunay三角网算法例子
#include <opencv2/opencv.hpp> #include <vector> using namespace cv; using namespace std; ...
- 一款监控网络状态的好工具- Smokeping
最近工作中需要监测某个分公司到IDC机房的网络情况,到网络上找了不少软件,发现一款叫smokeping的开源软件还不错,它是rrdtool的作者制作的,在图形显示方面很漂亮,可以用来很好的检测网络状态 ...
- json字符串转json对象的方法
在使用$.ajax()方法时,我们可以设置dataType:'json'的参数,便可以拿到后台返回的json数据对应的json对象.但有时,我们拿到的是json字符串,需要将它再转成json对象来使用 ...
- Failed to create the java virtual machine完全解决办法
一直用EcliPSe开发java,突然有这么一天,无法启动了,splash窗口显示“Failed to create the Java Virtual Machine”,结果发现eclipse和mye ...
- [Java] 02 String的常用方法
public class TestString{ public static void main(String[] args){ String str1 = "123"; Stri ...
- wall 和panel有啥区别
Panel指的是一个面板,用它来对一些控件进行分组,就像组合框控件,即Visual Studio里面用的Group Box Control:而在一些软件界面里面也可以表现为工具条,比如编辑工具条.文件 ...
- bat文件创建mysql数据库 数据库名为meter
-- 详见附件,已自测通过 //修改为mysql安装路径 C:\Program Files\MySQL\MySQL Server 5.5" createtestd ...
- linux入门学习1
推荐 实验楼网站 在线的linux环境和课程学习 这是一些摘要和笔记 UNIX/Linux历史简介 操作系统始于二十世纪 50 年代,当时的操作系统能运行批处理程序.但是不能实现交互.交互式操作系统也 ...