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. POJ - 1753 Flip Game (IDA*)

    题意:4*4的棋盘摆满棋子,有黑有白,翻转一个棋子的同时也将翻转其上下左右的棋子(翻转后黑变白,白变黑),问使棋盘上所有棋子颜色相同,最少翻转的棋子数. 分析: 1.每个棋子至多翻转1次.翻转偶数次与 ...

  2. 19 — node 模块化 及 CommonJS规范 — CommonJS 的由来及各组织与 JS 的关系

    ECMAScript  对于不同的环境(运行平台),设计结构,理念,使用方式大相径庭. 1,浏览器 :DOM BOM 2,NodeJS :FS,HTTP 内置模块 :  第三方模块 : 内置模块 3, ...

  3. java获取键盘事件

    转 <script type="text/javascript" language=JavaScript charset="UTF-8"> docu ...

  4. Day2-T3

    原题目 Describe:质数问题 code: #pragma GCC optimize(2) #include<bits/stdc++.h> #define KKK 1200 using ...

  5. docker-compose 安装 mongodb

    1. 修改 docker-compose.yml version: "2.1" services: php7.1: build: ./php image: php7.1-ext p ...

  6. 实验吧Web-易-简单的sql注入之3(报错的sql盲注之exp)

    题目提示是报错注入,于是就用盲注技巧来注入. 这里注入时发现floor,extractvalue,updatexml被吃掉了,用exp可以注入成功.(记住大小写绕过等技巧) 1.爆库 ' or exp ...

  7. 简单makefile示例

    Makefile cmd: - g++ 相信在linux下编程的没有不知道makefile的,刚开始学习linux平台下的东西,了解了下makefile的制作,觉得有点东西可以记录下. 下面是一个极其 ...

  8. POJ 1466：Girls and Boys 二分图的最大点独立集

    Girls and Boys Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 11097   Accepted: 4960 D ...

  9. Django——CSRF防御

    关于CSRF攻击原理在上一篇博客已经有过说明,这篇主要介绍下Django关于开启CSRF及CSRF工作机理.关于开启防御有两种,一种是全局开启,另一种是局部开启. 全局: 中间件 django.mid ...

  10. NBU For Windows 更新后无法启动Java Console

    系统环境:Win Server 2016 备份软件:NBU 8.1   Case :Windows系统默认自动安装系统补丁,重启过程中自动进行了Update,打上了最新的补丁后,NBU Java Co ...