浏览器冒泡型事件

最新推荐文章于 2024-09-11 11:02:35 发布

dwzhang2009

最新推荐文章于 2024-09-11 11:02:35 发布

阅读量173

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/dwzhang2009/article/details/83953610

版权

在使用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库,刚开始学习中,所以这里应用了一下.就是简单的操作.应该能看懂