在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF]
1.阻止事件冒泡,使成为捕获型事件触发机制.
view sourceprint?1 function stopBubble(e) {
2 //如果提供了事件对象，则这是一个非IE浏览器
3 if ( e && e.stopPropagation )
4 //因此它支持W3C的stopPropagation()方法
5 e.stopPropagation();
6 else
7 //否则，我们需要使用IE的方式来取消事件冒泡
8 window.event.cancelBubble = true;
9 }
2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
view sourceprint?01 //阻止浏览器的默认行为
02 function stopDefault( e ) {
03 //阻止默认浏览器动作(W3C)
04 if ( e && e.preventDefault )
05 e.preventDefault();
06 //IE中阻止函数器默认动作的方式
07 else
08 window.event.returnValue = false;
09 return false;
10 }
那么通过下面的一段代码我们来看下函数一的效果:
view sourceprint?01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03
04 <head>
05 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
06 <title>效果测试</title>
07 <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
08 <script language="javascript" type="text/javascript">
09 $(document).ready(function()
10 {
11 $('div.c1').click(function(e){alert('单击了div');});
12 $('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
13 $(document).click(function(e){alert('单击了document');});
14 $('#txt1').val('123');
15 $('#txt1').click(function(e){stopBubble(e);});
16 $('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
17 })
18
19 function stopBubble(e) {
20 //如果提供了事件对象，则这是一个非IE浏览器
21 if ( e && e.stopPropagation )
22 //因此它支持W3C的stopPropagation()方法
23 e.stopPropagation();
24 else
25 //否则，我们需要使用IE的方式来取消事件冒泡
26 window.event.cancelBubble = true;
27 }
28 //阻止浏览器的默认行为
29 function stopDefault( e ) {
30 //阻止默认浏览器动作(W3C)
31 if ( e && e.preventDefault )
32 e.preventDefault();
33 //IE中阻止函数器默认动作的方式
34 else
35 window.event.returnValue = false;
36 return false;
37 }
38 </script>
39 <style type="text/css">
40 body{
41 font-size:14px;
42 }
43 }
44 .c1{
45 font-family:"Arial Unicode MS"
46 }
47 .c2{
48 font-family:helvetica,simsun,arial,clean
49 }
50 </style>
51 </head>
52
53 <body>
54
55 <div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
56
57 <div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
58
59 <div><input id="txt1" name="Text1" type="text" /></div><hr/>
60
61 </body>
62 </html>
上面的效果测试中,
函数一:IE6.0,FireFox,Chrome,Opera均有效
函数二:在IE中测试效果很好;Chrome,Opera无效,在FF中,按键时,如果在
$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
这句话打个断点在执行,可以达到效果.但是如果不打断点则没有效果,没找出具体原因,如果有知道的可以说出来大家讨论下.
另外需要说的是,里面应用了JQuery库,刚开始学习中,所以这里应用了一下.就是简单的操作.应该能看懂
分享到：
相关推荐
1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation()...
冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发。 示例（1）：点击我触发冒泡型事件流 示例（1）的XHTML代码结构：”cnt0″> 点击我触发冒泡型事件流</a></...
//事件处理兼容各种浏览器，采用能力检测方法，所谓能力检测，就是... //非IE浏览器采用dom2级事件处理，type为事件类型如：click，handler为事件处理函数，false代表事件采用冒泡处理模型，如果是true代表 采用捕获型
事件分类 捕获型事件(非IE)、冒泡型事件(所有浏览器都支持) 捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示： 冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到...
浏览器的事件模型分两种：捕获型事件和冒泡型事件。由于ie不支持捕获型事件，所以以下主要以冒泡型事件作为讲解。 （dubbed bubbling）冒泡型指事件安装最特定的事件到最不特定的事件逐一触发。 代码如下: <...
A 事件流（event flow ） 事件模型分为两种：冒泡型事件、捕获型事件。 冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型（event capturing ）事件：它与冒泡型...
一、事件流 IE中是冒泡型事件，即从最特定的事件目标到最不特定的事件目标。 Netscape Navigator使用的是捕获型事件，这个跟IE中采用的冒泡型事件相反。 DOM事件流同时支持两种事件模型，但捕获型事件先发生。 二、...
一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定的事件目标（document对象）的顺序触发。 过程：按照DOM的层次结构像水泡一样不断上升至顶端。（从里面的div触发...
如在设置了JS代码响应标签的Enter按键触发事件时，根据冒泡型事件原则该事件会一直传到表单处，并将表单提交。这不是我们想要的效果，我们可以设置如下代码来加以屏蔽： $(document).keydown(function(event){ ...
IE event flow.htm 冒泡型事件 IE Event handler.htm IE中的事件处理函数 DOM Event handler.htm DOM事件处理监听函数 DifferenceOfIE&DOM.htm IE与DOM中event对象的共性 Test4EventType.htm 获取按键...
3.3.4 事件冒泡的副作用 3.4 限制和终止事件 3.4.1 阻止事件冒泡 3.4.2 移除事件处理程序 3.5 模仿用户操作 3.6 小结 第4章 效果——为操作添加艺术性 4.1 修改内联CSS 4.2...
IE event flow.htm 冒泡型事件 IE Event handler.htm IE中的事件处理函数 DOM Event handler.htm DOM事件处理监听函数 DifferenceOfIE&DOM.htm IE与DOM中event对象的共性 Test4EventType.htm 获取按键...
IE event flow.htm 冒泡型事件 IE Event handler.htm IE中的事件处理函数 DOM Event handler.htm DOM事件处理监听函数 DifferenceOfIE&DOM.htm IE与DOM中event对象的共性 Test4EventType.htm 获取按键代码 CheckAlt&...
#JS事件冒泡和事件委托原型继承和古典继承执行上下文，闭合提升，函数和块作用域绑定–专门调用，绑定，应用和词法化此Ajax实现承诺Promise实现querySelector实现retryOnFailure回调与Promise展平数组cookie，...
// 阻止事件冒泡行为 stopBubble : function(ev) { // 如果传入了事件参数，则说明不是ie浏览器 if (ev && ev.stopPropagation) { ev.stopPropagaton(); } else { window.event.cancelBubble =...
CancelClientEvent()是使用事件冒泡阻止了事件的继续执行，同时设置返回值，最终成功阻止事件的继续往后执行，当在客户端触发一要回发的按钮事件是，想在程序里结束让其继续执行时，以往则不是很好处理，如Enter键，...
6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器...
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
（s1+1运算结果是int型，需要强制转换类型） short s1 = 1; s1 += 1;（可以正确编译） 29、Math.round(11.5)等於多少? Math.round(-11.5)等於多少? Math.round(11.5)==12 Math.round(-11.5)==-11 round方法返回...