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. ASP.NET MVC 站点设置.html 为起始页

    1.  删除 controller="XX" 2. 确保你的工程根目录下的*.htm或*.html文件名在IIS默认文档中存在 搞定

  2. PS:WINRAR制作32位安装程序和64位安装程序选项

    32位 64位

  3. snprintf 返回值

    在平时写代码的过程中,我一个推荐带有n系列的字符串函数,如 strcat ->strncat sprintf->snprintf 我们有类似的一个函数 void dump_kid(std: ...

  4. 基于嵌入式的c语言连接器

      一个C程序可能是由多个分别编译的部分组成,这些不同部分通过一个通常叫做链接器(或连接器,载入器)的程序合并成一个整体.因为编译器一般每次只处理一个文件,所以它不能检测出那些需要一次了解多个源程序文 ...

  5. Windows与自定义USB HID设备通信说明.

    1 .   所使用的典型 Windows API CreateFile ReadFile WriteFile 以下函数是 DDK 的内容: HidD_SetFeature HidD_GetFeatur ...

  6. 获取编译学习笔记 (六)—— si、di,双环

    疯狂暑期学习  汇编入门学习笔记 (六)-- si.di,双重循环 參考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or.就不多说了. [bx+ ...

  7. 机器人操作系统 除了Android还有一个ROS(转)

    你知道市面上的机器人都采用了哪些操作系统吗? 估计大多数人给出的答案就是 Android 了.从市面上的产品来看,基于 Android 系统开发的机器人确实是主流,但是还有一种操作系统却鲜为人知,它叫 ...

  8. 深入学习Java中的字符串,代码点和代码单元

    在Java字符串处理时,在使用length和charAt方法时,应该格外小心,因为length返回的是UTF-16编码表示下的代码单元数量,而非我们所认为的字符的个数,charAt方法返回的是指定位置 ...

  9. 基于redis的cas实现

    cas是我们常用的一种解决并发问题的手段,小到CPU指令集,大到分布式存储,都能看到cas的影子.本文假定你已经充分理解一般的cas方案,如果你还不知道cas是什么,请自行百度 我们在进行关系型数据库 ...

  10. Scala: 简介和安装

    http://blog.csdn.net/pipisorry/article/details/52902117 Note: lz只是稍微学学,能看懂就行,不深入.适合scala小白. Scala简介 ...