&&国之画&&&&&&
&& &&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！jquery中阻止事件冒泡方式及其区别
Jquery提供了两种方式来阻止事件冒泡方式一：event.stopPropagation();$(&#div1&).mousedown(function(e){& & & & e.stopPropagation();});方式二：$(&#div1&).mousedown(function(e){& & & &});但是这两种方法是有区别的。return false不仅阻止了事件往上冒泡，而且阻止了事件本身。e.stopProoagation()则只阻止事件往上冒泡，不阻止事件本身。js的写法：1&.停止冒泡的写法//如果提供了事件对象，则这是一个非IE浏览器if(e&&e.stopPropagation){& & & & //因此它支持W3C的stopPropagation()方法& & & & e.stopPropagation();}else{& & & & //否则，我们需要使用IE的方式来取消事件冒泡& & & & window.event.cancelBubble=}2&.阻止浏览器的默认行为//如果提供了事件对象，则这是一个非IE浏览器if(e&&e.preventDefault){& & & & //阻止默认浏览器动作（W3C）& & & & e.preventDefault();}elsejquery的写法：A.return false---在事件的处理中，可以阻止默认事件和冒泡事件B.event.preventDefault()---在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。C.event.stopPropagation()---在事件的处理中，可以阻止冒泡但是允许默认事件的发生。prototype的写法：Event.stop(event)用法介绍：事件发生后，浏览器通常首先触发事件发生元素上的事件处理程序，然后是它的父元素，父元素的父元素……依此类推，直到文档的根元素为止。这被称为是事件冒泡，是事件传播的最常见的方式。当处理好一个事件后，你可能想要停止事件的传播，不希望它继续冒泡。当你的程序有机会处理事件时，如果这个事件有默认行为，同时浏览器也会处理它。例如，点击导航链接，将表单提交到服务器，在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式，可能会非常希望阻止相关默认行为。事件捕获：允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。事件目标：纯javascript属性event.target事件处理程序的变量event保存着事件对象。而event.target属性保存折发生事件的目标元素。这个属性DOM API中规定的，但是没有被所有浏览器实现。Jquery通过.target可以确定DOM中首先接收到事件的元素（即被实际单击的元素），而且，this应用的是处理事件的DOM元素。$(document).ready(function(){& & & & $(&sweitcher&).click(function(event){& & & & & & & & if(event.target==this){& & & & & & & & & & & & $(&#switcher .button&).toggleClass('hidden');& & & & & & & & }& & & & });});target事件属性定义和用法：target事件属性可返回事件的目标结点（触发该事件的结点），如生成事件的元素，文档或窗口。语法：event.target事件委托：通俗的讲，事件就是onclick，onmouseover等就是事件，委托就是让别人来做，这个事件本来是加在某些元素上的，然而却加到别人身上来做，完成这个事件。原理：利用冒泡的原理，把事件加到父级上，触发执行效果。作用：1.性能好2.针对新创建的元素，直接可以拥有事件事件源：跟this作用一样（他不用看指向问题，谁操作的就是谁），event对象下的使用情景：1.为DOM中的很多元素绑定相同事件。2.为DOM中尚不存在的元素绑定事件。Jquery的事件委托$(function(){& & & & $('#ul1,#ul2').on('click',function(){& & & & & & & & if(!$(this).attr('s')){& & & & & & & & & & & & $(this).css('background','red');& & & & & & & & & & & & $(this).attr('s',true);& & & & & & & & }else{& & & & & & & & & & & & $(this).css('background','#fff');& & & & & & & & & & & & $(this).removeAttr('s');& & & & & & & & }& & & & });});事件切换hover(over,out)一个模仿悬停事件的方法。over：鼠标移到元素上要触发的函数out：鼠标移出元素要触发的函数toggle(fn,fn)每次点击后，依次触发函数如果点击了一个匹配的元素后，则执行指定的第一个事件处理函数；当再次点击该元素时，会执行下一个事件处理函数；如果有更多函数，则依次触发，直到最后一个，然后循环调用。jquery事件对象jquery同意了事件对象，当绑定事件处理函数时，会将jquery格式化后的事件对象作为唯一参数传入：$(&#div1&).bind(&click&,{foo:&ooo&},function(e){& & & & alert(e.data.foo);});jquery事件对象的函数：preventDefault();isDefaultPrevented();stopPropagation();isPropagationStopped();stopImmediatePropagation();isImmediatePropagationStopped();
19 总笔记数
2.5万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：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
最近更新的内容
常用在线小工具142977人阅读
JQuery（4）
JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
&&& &&& $(&#div1&).mousedown(function(event){
&&& &&& &&& event.stopPropagation();
&&& &&& });
&&& &&& $(&#div1&).mousedown(function(event){
&&& &&& &&&
&&& &&& });
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
场景应用：
Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
示例测试代码：
当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& lang=&zh-CN&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&title&&/title&
&script language=&JavaScript& type=&text/javascript& src=&jquery-1.3.2.min.js&&&/script&
&&& $(document).ready(function(){
&&& &&& $(&#div1&).mousedown(function(event){
&&& &&& &&& //event.stopPropagation();
&&& &&& &&&
&&& &&& });
&&& &&& $(&#div2&).mousedown(function(event){
&&& &&& &&& alert(&trigger mousedown event of rootDiv&);
&&& &&& });
&&& &div id=&rootDiv& style=&position:left:400top:200&&
&&& &&& &div&1.单击输入框，使输入框获取焦点：&/div&
&&& &&& &input id=&input1& style=&width:250& type=&text&&&/input&
&&& &&& &div id=&div2&&
&&& &&& &&& &div id=&div1& style=&width:200height:200background-color:&&&br&&br&2.然后再单击这里&/div&
&&& &&& &/div&
&&& &/div&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：830967次
积分：6443
积分：6443
排名：第2472名
原创：90篇
转载：69篇
评论：144条
(1)(3)(5)(1)(1)(1)(2)(1)(1)(1)(1)(1)(1)(1)(1)(1)(2)(1)(3)(2)(2)(5)(5)(3)(2)(2)(1)(4)(3)(8)(7)(3)(6)(10)(10)(12)(15)(2)(3)(3)(12)(3)(1)(1)(1)(2)(1)(1)jQuery 教程
jQuery event.stopPropagation() 方法
阻止 click 事件冒泡到父元素：
$("span").click(function(event){
event.stopPropagation();
alert("The span element was clicked.");});
$("p").click(function(event){
alert("The p element was clicked.");
});$("div").click(function(){
alert("The div element was
clicked.");});
定义和用法
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
提示：请使用
方法来检查指定的事件上是否调用了该方法。
event.stopPropagation()
必需。event 参数来自事件绑定函数。