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. P1906联合权值

    描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...

  2. 03、AngularJs的模块与控制器

    大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...

  3. 【转】java调用webservice

    互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为 ...

  4. DedeCMS织梦系统head.htm里无法调用栏目描述

    {dede:channel type='top'} [field:description/] {/dede:channel} channel 这个标签没有description属性你需要自己把这个属性 ...

  5. JavaScript 基础第一天

    一.前言 如果将前端比喻成一人,那么Html就是这个人的骨骼脉络,CSS则是这个人的身上的装饰,JavaScript则是这个人的行为.作为一种脚本语言JavasSript具有着弱类型等特点.(在这里我 ...

  6. 从KRE到XRE：ASP.NET 5中正在消失的那些K

    前几天写了篇博客ASP.NET 5中的那些K,刚把ASP.NET 5中的那些K搞明白了些,昨天发现微软正在让那些K消失. 首先是在 KRuntime 的git日志中发现的: * Runtime ren ...

  7. 如何捕获和分析 JavaScript Error

    前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常 ...

  8. [.net 面向对象编程基础] (21) 委托

    [.net 面向对象编程基础] (20)  委托 上节在讲到LINQ的匿名方法中说到了委托,不过比较简单,没了解清楚没关系,这节中会详细说明委托. 1. 什么是委托? 学习委托,我想说,学会了就感觉简 ...

  9. iOS——自定义Segue实现总结

    在阅读了iOS 8自定义动画转场上手指南后,刚开始不理解,后来慢慢消化了,现在总结如下: 1. 自定义Segue关键在于继承UIStoryboardSegue并重写perform方法 2. 动画可以在 ...

  10. 对Google cloud platform 做了点研究

    Google也推出了云计算基础服务, 加上微软Azure,亚马逊AWS, 都齐活了. 下面是研究了一下对其的一个初步了解. 计算: Compute Engine     IaaS平台,提供VM,操作灵 ...