javascript阻止事件冒泡和浏览器的默认行为
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阻止事件冒泡和浏览器的默认行为的更多相关文章
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- 51nod 1475：建设国家 优先队列的好题
1475 建设国家 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 小C现在想建设一个国家.这个国家中有一个首都,然后有若干个中间站,还有若干个城市 ...
- PHP - 接收检验验证码 ， 以JSON的形式将验证结果返回给前端
<?php session_start(); $codeT = strtoupper(trim($_POST['codeT']));//接收前端传来的数据,转换成大写 $raw ...
- 二十一、CI框架之MCV
一.我们在M模型文件里面添加一个文件,代码如下: 二.在C控制器中加载模型,并调用模型函数,输出达到View,控制器代码如下: 三.在View里面输出控制器传过来的参数 四.显示效果如下: 五.我们对 ...
- Linux 压缩解压操作
Linux 压缩解压操作 Linux解压文件到指定目录 tar在Linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数 参数:-c :create 建立压缩档案的 ...
- 第七届（16年）蓝桥杯java B组决赛真题 愤怒的小鸟 解题思路
愤怒小鸟 X星球愤怒的小鸟喜欢撞火车! 一根平直的铁轨上两火车间相距 1000 米两火车 (不妨称A和B) 以时速 10米/秒 相对行驶. 愤怒的小鸟从A车出发,时速50米/秒,撞向B车,然后返回去撞 ...
- 2.Git基本配置
用户名和邮箱地址是本地git客户端的一个变量 . 用户每次提交代码都会记录用户名和邮箱 . 设置git的用户和邮箱git config [--local | --global | --system] ...
- php封装一个接口类
<?phpClass Response{//返回数据 public static function show($code,$message='',$data='',$type = 'json', ...
- idea创建远程分支
1.先从远程拉取一个完整的分支,master或dev 2.新建一个分支,new,新建的同时checkout 出来 3.把新建的分支push到远程 4.如果新建完分支后写代码了,需要先把代码提交然后一起 ...
- keras_yolo3阅读
源码地址 https://github.com/qqwweee/keras-yolo3 春节期间仔细看了看yolov3的kears源码,这个源码毕竟不是作者写的,有点寒酸,可能大道至简也是这么个理.我 ...
- nginx下第一次使用thinkphp5遇到的坑
最近面试php很多都在问会不会tp5所以借机了解了一下,刚在本地搭建了个就遇到了问题. 这里总结一下: 问题1.tp5+nginx=500 internal server error 我用的是phps ...