js阻止冒泡
在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。

复制代码 代码如下:
function stopPro(evt){
var e = evt || window.event;
//returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，
//可以取消发生事件的源元素的默认动作。
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
}

或者：

复制代码 代码如下:
function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
//IE
evt.cancelBubble = true;
}

JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();

复制代码 代码如下:
$("#div1").mousedown(function(event){
event.stopPropagation();
});

方式二：return false;

复制代码 代码如下:
$("#div1").mousedown(function(event){
return false;
});

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。
例如：

复制代码 代码如下:
$("a").click(function(event){
event.preventDefault(); //阻止默认动作即该链接不会跳转。
alert(4);//但是这个还会弹出
event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身
});

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
场景应用：Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
Jquery案例：

复制代码 代码如下:
<script src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$("#aa").click(function(event){
alert("aa");
event.preventDefault();
event.stopPropagation();
alert(3);
});
$("#ee").click(function(){
alert("ee");
});
$("a").click(function(event){
event.preventDefault();
alert(4);
event.stopPropagation();
return false;
});
});
</script>
</head>
<body>
<div id="ee">
aaaaaaa
<input id="aa" type="button" value="test" />
<a href="http://baidu.com">baidu.com</a>
</div>
</body>

js案例：

复制代码 代码如下:

function tt(){
alert("div");
}
function ttt(){
var e = arguments.callee.caller.arguments[0] || window.event;
window.event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble:e.stopPropagation();
alert(4);
}
</script>
</head>
<body>
<div onclick = "tt();">
ccccc
<a href="http://baidu.com" onclick="ttt();">baidu.com</a>
</div>

js阻止冒泡及jquery阻止事件冒泡示例介绍的更多相关文章

  1. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  2. JQuery中事件冒泡

    JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  6. 【JQuery】事件冒泡及使用jQuery阻止

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  7. jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)

    1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...

  8. 整理了一些jQuery关于事件冒泡和事件委托的技巧

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <di ...

  9. 恶补jquery(四)jquery中事件--冒泡

    事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...

随机推荐

  1. Windows Phone 8.1 新特性 - 常用的启动器

    本篇为大家介绍一下 Windows Phone 8.1 中部分常用启动器的实现方式.分别是 呼叫电话.发送短信.发送邮件.添加约会到日历.启动地图.地图路线显示.地图下载 和 地图更新. 1. 呼叫电 ...

  2. 联想Phab2 Pro Tango手机测评

    评分:8分 优点:创新的AR应用手机,可以当成一个游戏机了 缺点:还没找到 评语:打开新世界的大门,现实与虚拟结合,枯燥的生活添加一点幻想,走进童话般的梦幻王国,丰富多彩 包装 外形 打开主界面 最主 ...

  3. 我的github代码库

    我的github代码库地址:https://github.com/gooree.Enjoy coding,enjoy sharing.

  4. 使用Statement操作数据库

    i import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql ...

  5. Software Testing hw3

    (a):可绘制出如下图所示的流程图 (b):对于测试用例t1=(n=3)和t2=(n=5),MAXPRIMES = 4时,t1不能检查出错误,而t2则会发生数组越界错. (c):要使测试路径不通过wh ...

  6. JS中innerHTML，innerText，value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  7. Smack 3.3.1 发布，Java 的 XMPP 开发包

    Smack 3.3.1 发布了,这是一个小更新版本,主要更新包括: [SMACK-441] - Memory leak in KeepAliveManager [SMACK-447] - Compre ...

  8. 使用F#来实现哈夫曼编码吧

    最近算法课要求实现哈夫曼编码,由于前面的问题都是使用了F#来解决,偶然换成C#也十分古怪,报告也不好看,风格差太多.一开始是打算把C#版本的哈夫曼编码换用F#来写,结果写到一半就觉得日了狗了...毕竟 ...

  9. 微软正式发布Visual Studio 2013 Update 3 (2013.3) RTM

    昨天微软的Visual Studio 2013 Update 3(Visual Studio 2013.3)正式发布(RTM)了,做为微软认证金牌合作的葡萄城控件,我们组织力量第一时间进行翻译.分享给 ...

  10. Java设计模式1：设计模式概论

    设计模式是什么 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易地被他人理解.保证代码可靠性.毫无 ...