1.阻止事件冒泡,使成为捕获型事件触发机制.

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文本框对象时,可以取消返回值.即停止默认事件默认行为.

 1 //阻止浏览器的默认行为

 2 function stopDefault( e ) {

 3     //阻止默认浏览器动作(W3C)

 4     if ( e && e.preventDefault )

 5         e.preventDefault();

 6     //IE中阻止函数器默认动作的方式

 7     else

 8         window.event.returnValue = false;

 9     return false;

10 }

那么通过下面的一段代码我们来看下函数一的效果:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3

 4 <head>

 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

 6 <title>效果测试</title>

 7 <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>

 8 <script language="javascript" type="text/javascript">

 9 $(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>

javascript阻止事件冒泡和浏览器的默认行为的更多相关文章

  1. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  2. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  3. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  4. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  5. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  6. JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  7. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  8. javascript 阻止事件冒泡

    阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...

  9. JavaScript阻止事件冒泡

    今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. core_cm4.h(129): error: #35: #error directive: "Compiler generates FPU instructions for a device without an FPU (check __FPU_PRESENT)"

    今天使用 systick 的时候,只使用了头文件 core_cm4.h,结果就报错了,原因是 __FPU_PRESENT 没有定义,这个定义其实在 stm32f4xx.h 里面.所以如果要解决这个错误 ...

  2. idea新建java项目

    盘符下新建一个目录: 打开idea: Open -> 新建的目录: 右击目录 -> new -> module: 填写模块名 -> finish: file -> pro ...

  3. MySQL数据类型使用总结，浮点使用注意事项

    1.对于精度要求较高的应用中,建议使用定点数来存储数值,以保证结果的准确性. 2.对于字符类型,要根据存储引擎进行相应的选择 3.对含有TEXT和BOLB字段的表,如果经常做删除和修改记录的操作要定时 ...

  4. chown virtualbox

    virtualbox安装 root@cbill-VirtualBox:/# chown --help用法:chown [选项]... [所有者][:[组]] 文件... 或:chown [选项]... ...

  5. nginx基础知识小结

    配置文件讲解: #user nobody; #开启进程数 <= CPU数 worker_processes 1; #错误日志保存位置 #error_log logs/error.log; #er ...

  6. (转)mysql语句

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  7. 在vSphere群集中配置EVC的注意事项

    原路径:https://blog.51cto.com/wangchunhai/2084434 个人觉得有一点写的有出入: 2 vCenter保存在本地存储中,无共享存储 中主机图片和描述信息有异常. ...

  8. Fidder IOS抓包

    Fiddler-HTTPS配置 手机抓包配置 手机网络配置 打开Safari浏览器输入IP+端口号:192.168.0.14:8888,安装证书 证书信任设置:通用 - 关于本机 - 证书信任设置 - ...

  9. POJ 1258：Agri-Net Prim最小生成树模板题

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 45050   Accepted: 18479 Descri ...

  10. JavaScript学习总结（四）

    这一部分我们继续介绍JavaScript的常用对象. Number对象 创建Number对象 方式1: var 变量= new Number(数字) 方式2: var 变量 = 数字; 常用的方法 t ...