jQuery中事件对象e的事件冒泡用法示例介绍

2014-10-13  来源:本站原创  分类:jquery  人气:0 

这篇文章主要介绍了jQuery中事件对象e的事件冒泡用法,需要的朋友可以参考下

之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷。查了一天的资料,终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能。

e.stopPropagation()阻止事件冒泡

<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td><span>冒泡事件测试</span></td>
</tr>
</table>
</body>

我们先看这段代码:

复制代码 代码如下:

<script type="text/javascript">
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (){
alert("span alert");
});
});
</script>

我们会看到这样的情况:span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上,从里到外,事件依次触发。能依次触发的条件是拥有同一事件的多个嵌套的标签,切事件会同时同步发生,会从里到外实现同一事件的响应。

有的时候我们不希望事件冒泡咋办?

复制代码 代码如下:

<script type="text/javascript">
$(function () {
$("table").click(function () { alert("table alert"); });
$("td").click(function () { alert("td alert"); });
$("span").click(function (e){
alert("span alert");
e.stopPropagation();
});
});
</script>

当我给整个document实现click事件是,可以给文本框和下拉选框阻止事件冒泡,使得再点击她们的同时不会使document触发事件。

如果想获得事件相关信息,就要给知识方法加一个e对象,e就是事件对象。

e.preventDefault()阻止事件默认行为。

复制代码 代码如下:

$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});
<a href="http://www.baidu.com">测试</a>

return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:

复制代码 代码如下:

if (ret===false){
  event.preventDefault();
  event.stopPropagation();
}
相关文章
  • jQuery中事件对象e的事件冒泡用法示例介绍 2014-10-13

    这篇文章主要介绍了jQuery中事件对象e的事件冒泡用法,需要的朋友可以参考下 之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来.但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷.查了一天的资料,终于在脱离了焦点这一块.在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能. e.stopPropagation()阻止事件冒泡 <head> <title>

  • Jquery中的层次选择器与find()的区别示例介绍 2014-01-04

    Jquery中的层次选择器与find()是有一定的区别,本文有个示例可以很好的说明,感兴趣的朋友可以参考下 $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代

  • 开发小技巧: 如何在jQuery中禁用或者启用滚动事件.scroll 2013-04-23

    日期:2013-4-10 来源:GBin1.com 在线演示 开发人员在使用jQuery开发web应用或者网站的过程中,有的时候需要触发特定元素来禁用页面滚动特性,或者启动页面滚动,使用下面的jQuery代码可以帮助你实现window对象滚动事件的绑定和解除绑定. 代码非常简单,使用jQuery的.off方法可以帮助你取消事件的绑定,具体代码如下: var scrollHandler = function(){ ...... 在线调试: http://www.gbtags.com/gb/debu

  • Jquery中Event对象属性小结 2014-02-13

    这篇文章主要介绍了Jquery中Event对象属性的操作方法的总结,非常的详细,是篇十分不错的文章,这里推荐给大家. JS的Event对象是触发事件的时候传递给事件处理函数的一个对象,这个对象中存在触发事件的基本信息.如:触发事件的事件源.键盘码(如果存在)等基本信息. 1.通过event.type获取事件的类型 <script> $(function(){ $("a").click(function(event) { alert(event.type);//获取事件类型

  • jQuery中json对象的复制方式介绍(数组及对象) 2015-02-24

    本文为大家介绍下jQuery中json对象的复制:jQuery自带的$.map方式.深复制与浅复制等等,感兴趣的朋友可以参考下哈,希望对大家有所帮助 1.jQuery自带的$.map方式 $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢失了,后来发现了第二种方法. 2.深复制与浅复制 复制代码 代码如下: // 浅层复制(只复制顶层的非 object 元素) var newObject

  • Python中的对象,方法,类,实例,函数用法分析 2013-12-14

    这篇文章主要介绍了Python中的对象,方法,类,实例,函数用法,从面向对象的角度分析了对象,方法,类,实例,函数等的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例分析了Python中的对象,方法,类,实例,函数用法.分享给大家供大家参考.具体分析如下: Python是一个完全面向对象的语言.不仅实例是对象,类,函数,方法也都是对象. class Foo(object): static_attr = True def method(self): pass foo = Foo()

  • JavaScript中遍历对象的property的3种方法介绍 2014-05-15

    这篇文章主要介绍了JavaScript中遍历对象的property的3种方法介绍,本文先是讲解了3种方法并用一张图片加深理解,然后给出代码实例,需要的朋友可以参考下 在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Objec

  • jquery中event对象属性与方法小结 2013-11-06

    本篇文章主要是对jquery中的event对象属性与方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JQuery读书笔记?Event属性说明 JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用. * .target 这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是

  • jquery中常用的SET和GET$("#msg").html循环介绍 2015-03-19

    jquery中常用的SET和GET$("#msg").html循环想必大家并不陌生吧,本文整理了一些,感兴趣的朋友可以参考下 $("#msg").html(); //返回id为msg的元素节点的html内容. $("#msg").html("new content"); //将"new content" 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $("#

  • ECMAScript5中的对象存取器属性:getter和setter介绍 2014-03-09

    这篇文章主要介绍了ECMAScript5中的对象属性存取器:getter和setter介绍,事实上在除ie外最新主流浏览器的实现中,任何一个对象的键值都可以被getter和setter方法所取代,这被称之为"存取器属性",需要的朋友可以参考下 显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是读(引用)和写了,譬如说o.get,这就是一个

  • jquery中map函数与each函数的区别实例介绍 2014-09-18

    ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组 ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ​例如: var items = [1,2,3,4]; $.each(items

  • jQuery中$.get.$.post.$.getJSON和$.ajax的用法详解 2014-12-11

    本文重点是来讲讲jQuery中调用ajax的4种方法:$.get.$.post.$getJSON.$ajax.如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问度娘,再来读本文. 当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发现,ajax

  • 浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例) 2014-01-06

    这几天,遇到了json格式在JS和Jquey的环境中,需要相互转换,在网上查了一下,大多为缺胳膊少腿,也许咱是菜鸟吧,终于测试成功后,还是给初学者们一个实例吧 首先,准备新建一个js文件.以下是JSON2.js的内容,把内容拷到js文件中,以便调用: /* http://www.JSON.org/json2.js Public Domain. NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. See http://www.JSON.o

  • jQuery中$.fn的用法示例介绍 2014-11-20

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.e

  • jQuery中ajax和post处理json的不同示例对比 2014-04-27

    用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了,关于这个问题的解决方法如下,你若遇到可以看看 近日在做门户的用户评论时,好长时间没有用jquery了正好用一下,没想到偷工用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了.不料这么小小一个问题挂了我好几个小时,后来我ajax方法处理,居然OK,一比较发现原来post方法回调json必须eval一下,而ajax方法做了默认处理了. 望各位小心. function haha(

  • ext中store.load跟store.reload的区别示例介绍 2015-02-25

    这篇文章主要介绍了ext中store.load跟store.reload的区别,需要的朋友可以参考下 reload : function(options){ this.load(Ext.applyIf(options||{}, this.lastOptions)); }, 复制代码 代码如下: load : function(options) { options = Ext.apply({}, options); this.storeOptions(options); if(this.sortI

  • JS中数组Array的用法示例介绍 2015-04-05

    这篇文章主要介绍了JS中数组Array的用法,需要的朋友可以参考下 new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a&qu

  • JSF中confirm弹出框的用法示例介绍 2014-05-14

    本文为大家详细介绍下JSF中confirm弹出框的使用方法,感兴趣的朋友可以参考下 function checkInput(objectSource) { if(objectSource.onclick){ objectSource.oldOnClick = objectSource.onclick; objectSource.onclick = null; } var attachfile = $('#attachment').val(); if(content.indexOf("附件&quo

  • SQL中DATEADD和DATEDIFF的用法示例介绍 2014-06-18

    这篇文章主要介绍了SQL中DATEADD和DATEDIFF的用法,需要的朋友可以参考下 通常,你需要获得当前日期和计算一些其他的日期,例如,你的程序可能需要判断一个月的第一天或者最后一天.你们大部分人大概都知道怎样把日期进行分割(年.月.日等),然后仅仅用分割出来的年.月.日等放在几个函数中计算出自己所需要的日期! 在这篇文章里,我将告诉你如何使用DATEADD和DATEDIFF函数来计算出在你的程序中可能你要用到的一些不同日期. 在使用本文中的例子之前,你必须注意以下的问题.大部分可能不是所有

  • 在JavaScript中判断整型的N种方法示例介绍 2015-03-14

    这篇文章主要介绍了在JavaScript中判断整型的N种方法,需要的朋友可以参考下 整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们