Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。
如下例所示：
&script type=&text/javascript& src=&jquery-1.7.1.js&&&/script&
function ialertdouble(e) {
alert(&innerdouble&);
stopBubble(e);
function ialertthree(e) {
alert(&innerthree&);
stopBubbleDouble(e);
function stopBubble(e) {
var evt = e||window.
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
function stopBubbleDouble(e) {
var evt = e||window.
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
$(function() {
//$(&#jquerytest&).click(function(event) {
// alert(&innerfour&);
// event.stopPropagation();
// event.preventDefault();
$(&#jquerytest&).click(function() {
alert(&innerfour&);
&div onclick=&alert(&without&);&&without
&div onclick=&alert(&middle&);&&middle
&div onclick=&alert(&inner&);&&inner&/div&
&div onclick=&ialertdouble(event)&&innerdouble&/div&
&p&&a href=&& onclick=&ialertthree(event)&&innerthree&/a&&/p&
&p id=&jquerytest&&&a href=&&&innerfour&/a&&/p&
当你点击inner的时候，会依次弹出‘inner’，‘middle’和‘without’。这就是事件冒泡。
从直观上来看，也是这样的，因为最里层的区域是在父级节点中的，点击了子级节点的区域，其实也是点击了父级节点的区域，所以事件会传播起来。
其实，很多的时候，我们并不想事件冒泡，因为这样会同时触发几个事件。
接下来：我们点击innerdouble。就会发现她并没有冒泡，因为她在调用的方法ialertdouble()中调用了stopBubble()方法，方法通过判断浏览器类型（Ie通过cancleBubble() 、firefox通过stopProgation()）来阻止冒泡。
但如果是链接的话，我们会发现她也会阻止冒泡，但是会跳转，这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。
目前主流的都是借助jquery来绑定click事件的，这样的话，就简单多了。
我们可以在点击事件时传入参数event，然后直接
event.stopPropagation();
event.preventDefault(); //没有链接不需要加这个。
这样就可以了。
框架就是好，其实还有更简单的，在事件处理程序中返回false，这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
【详细代码见上面，记得载入jquery.js。】
其实也还可以在每个click事件中加入判断：
$(&#id&).click(function(event){
if(event.target==this){
//do something
解析：事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写以上代码。
不过推荐使用return false，Jquery绑定事件的话。
更多请支持：http://www.webyang.net/Html/web/article_102.html
相关 [js 事件] 推荐：
- CSDN博客推荐文章
方法一、setAttribute. obj.setAttribute(&onclick&, &javascript:alert(&测试&);&);. 但是IE不支持用
setAttribute 设置某些属性，包括对象属性、集合属性、 事件属性，也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的.
- JavaScript - Web前端 - ITeye博客
1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件. 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果. 我们可以看一个例子：需要触发每个li来改变他们的背景颜色.
- Le - 开源中国社区最新软件
Kibo是一个简单的用于处理键盘事件的Javascript工具库. 这个Javascript类库的特点是，它不但能监听普通的按键事件，它还能监听组合键和功能键，例如Ctrl+C，Shift+w. 还有一个特点是，它把各种键都给符合化了，例如，如果你想监听[ctrl alt x]按键事件，你可以直接写成 k.down(‘ctrl alt x’, handler).
- JavaScript - Web前端 - ITeye博客
Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数.
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡.
- JavaScript - Web前端 - ITeye博客
本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生，需要的朋友可以参考下：. onkeypress 和 onkeydown 是有区别，下面将讲解 onkeypress 与 onkeydown 事件的区别. onkeypress 事件在用户按下并放开任何字母数字键时发生.
- Kejun - YY in Limbo 混沌海狂想
你上当叻，虽然从外面看标题很有气势，传达出一种宏大叙事的赶脚，其实我只是刚刚把一个阿尔法城的JS模块提交到github，想顺便介绍一下，但我连API文档都懒得写，就别指望能深入浅出的讲一遍来龙去脉了??. 所以就直接帖几个前置阅读的链接罢. 这些潮流的外部起源：（技术也有外源论/exogenesis??）.
- JavaScript - Web前端 - ITeye博客
通常在web应用或者网站中，我们使用鼠标来控制元素或者执行导航，相对于桌面应用来说，使用web应用的快捷键次数可能会相对比较少，但是对于熟 练的专业人员来说，使用键盘可能更加容易并且更加快速，在今天这篇文章中，我们收集了10个jQuery的插件，帮助你创建各种基于键盘事件的web应 用，相信大家会喜欢的.
- ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.
- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.
- 红烧鲤鱼 - Blog: timdream
很早以前就想講了，但講了大概又會被戰. 相較於英文維基百科，中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的，而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識，而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識，所以有自覺的百科編輯者反而是少數；中文維基只好長成現在這個樣子了.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。js冒泡、捕获事件及阻止冒泡方法详细总结
字体：[ ] 类型：转载 时间：
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，针对这两个问题，本文给出详细的解决方法，需要的朋友不要错过
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个jquery点击事件的例子： 代码如下：
代码如下: &!DOCTYPE html& &meta charset="utf-8"& &title&test&/title& &head& &script src="/jquery-latest.js"&&/script& &script type="text/javascript"& $(function(){ $('#clickMe').click(function(){ alert('hello'); }); $('body').click(function(){ alert('baby'); }); }); &/script& &/head& &body& &div style="width:100height:100background-color:"& &button type="button" id="button2"&click me&/button& &button id="clickMe"&click&/button& &/div& &/body& &/html&
事件冒泡现象：点击 “id=clickMe” 的button,会先后出现“hello” 和 “baby” 两个弹出框。 分析：当点击 “id=clickMe” 的button时，触发了绑定在button 和 button 父元素及body的点击事件，所以先后弹出两个框，出现所谓的冒泡现象。 事件捕获现象：点击没有绑定点击事件的div和 “id=button2” 的button, 都会弹出 “baby” 的对话框。 在实际的项目中，我们要阻止事件冒泡和事件捕获现象。 阻止事件冒泡方法： 法1：当前点击事件中
代码如下: $('#clickMe').click(function(){ alert('hello');
代码如下: $('#clickMe').click(function(event){ alert('hello'); var e = window.event || if ( e.stopPropagation ){ //如果提供了事件对象，则这是一个非IE浏览器 e.stopPropagation(); }else{ //兼容IE的方式来取消事件冒泡 window.event.cancelBubble = } });
貌似捕获事件不能被阻止
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js阻止事件冒泡的两种方法
时间： 13:20:34
&&&& 阅读：20
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一、冒泡事件简介
当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。
方法一：event.stopPropagation( );
html代码：
// 为所有div元素绑定click事件
$("div").click( function(event){
& & alert("div-click");
//为所有p元素绑定click事件
$("p").click( function(event){
& & alert("p-click");
//为所有button元素绑定click事件
$(":button").click( function(event){
& & alert("button-click");
& & // 阻止事件冒泡到DOM树上
& & event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click &
方法二：event.target
eventevent.targetDOM
API&.targetDOMthisDOM
$(document).ready(function(){
&$(‘#switcher‘).click(function(event){
&&$(‘#switcher .button‘).toggleClass(‘hidden‘);
$(document).ready(function(){
&$(‘#switcher‘).click(function(event){
&&if(event.target==this){
&&$(‘#switcher .button‘).toggleClass(‘hidden‘);
&div id="switcher"&&&。
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！js事件的冒泡和捕获在编程中有什么用?该如何处理
js事件的冒泡和捕获在编程中有什么用?该如何处理js事件的冒泡和捕获在编程中有什么用?如题..LZ 写的代码少，等代码写多了自然就会用到了！ 写个小例子，L@！ &body& &div id= &divParent & style= &background-color: #ffff00; width: 200 height: 200 && Parent! &div id= &divChild & style= &background-color: #00 width: 100 height: 100 && Child! &/div& &/div& &script type= &text/javascript && &!-- var oParent = document.getElementById( &divParent &); var oChild = document.getElementById( &divChild &); oParent.onclick = function() { alert( &Parent &); }; oChild.onclick = function() { alert( &Child &); // 停止冒泡！ // 注释看看效果有何不同！ event.cancelBubble = }; //--& &/script& &/body&
Copyright (C)2017
All rights reserved.