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. SOA--基于银行系统实例分析

    阅读以下关于 Web 系统设计的叙述 [说明] 某银行拟将以分行为主体的银行信息系统,全面整合为由总行统一管理维护的银行信息系统,实现统一的用户账户管理.转账汇款.自助缴费.理财投资.贷款管理.网上支 ...

  2. Ubantu学习笔记3

    修改PATH环境变量 ~/.profile --->(在文件最后一行添加) PATH="要增加的路径:$PATH" 或者 export 使用变量="调用参数&quo ...

  3. 19 01 17 Django 模板 返回一个页面

    模板 问题 如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为HttpResponse()的参数吗?这样定义 ...

  4. C++基础--引用的一点补充

    这一篇是对引用的一点补充,内容基本上是来自<C++ primer plus>一书第八章的内容. 前面一篇介绍了引用的一点特点,这里补充一个,将引用用于类对象的时候,有一个体现继承的特征,就 ...

  5. oracle查询语句注意事项：

    我想查出datatype 不等于1的所有结果,包括空. '; //这条sql查不出datatype为空的数据 发现oracle需要使用  is  null  .is  not null查询空或非空 ' ...

  6. 虚拟机vmware vmnet8 未识别（转）

    原文链接:https://blog.csdn.net/windows_q/article/details/50678646

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习：语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Centos下nginx安装

    安装很简单,这里记录只是为了记下下载地址: A.[root@localhost soft]# wget http://nginx.org/download/nginx-1.4.2.tar.gz B.[ ...

  9. linux_ssh用户枚举猜测

    新建一个用户名txt文档,写入常用的用户名 msfconsole use auxiliary/scanner/ssh/ssh_enumusers3

  10. 2018.11.16javascript课上随笔（DOM）

    <li> <a href = "“#”>-</a> </li> <li>子节点:文本节点(回车),元素节点,文本节点. 不同节点树 ...