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> < ...
随机推荐
- UVA - 12113 Overlapping Squares（重叠的正方形）
题意:给定一个4*4的棋盘和棋盘上所呈现出来的纸张边缘,问用不超过6张2*2的纸能否摆出指定的形状. 分析:2*2的纸在4*4的棋盘上总共有9种放置位置,枚举所有的放置位置即可.枚举情况总共种. #p ...
- realme发布会将于本周三在北京·幻艺术举行
5月13日消息,realme宣布将于5月15日(本周三)在北京·幻艺术中心发布realme X. 根据官方公布的海报,realme X采用了升降全面屏方案,无挖孔.无刘海.无水滴,支持屏幕指纹识别,正 ...
- jquery特效 - 网站水波纹
1,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- my97datepicker实现日期改变立刻触发函数
<input type="text" class="Wdate" onclick="WdatePicker({onpicking:functio ...
- 考研c语言基础 66++6
1.数据类型 对于基本的数据类型,如整型int,long,...(考研中涉及处理的整数题目,如果没有特别要求用int足够了),字符型char,浮点型float.double...(对于处理小数问题,在 ...
- Java语言学习总结 扩展篇 DateFormat类
DateFormat类 java.text .DateFormat 是 日期/时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换:也就是可以在Date对象与String对象之间进 ...
- Eclipse 快速打开文件所在的本地目录
目前收集到两种方法: 1.快捷键:Ctrl+Shift+W 2.利用Eclipse的External Tools设置快捷方式 第二种方法步骤: a.Run->External Tools-> ...
- NCRE的JAVA二级考试大纲
全国计算机等级考试二级 Java 语言 程序设计考试大纲(2018 年版) 基本要求 1． 掌握 Java 语言的特点.实现机制和体系结构. 2． 掌握 Java 语言中面向对象的特性. 3． 掌握 ...
- python2和python3共存
有很多朋友有这样的烦恼,自己的电脑里装了python2和python3,但是有些时候可能出现只能用python2或python3的情况,这个时候就蒙圈了,不知所措啊,我也是经过了这样的无奈,最后终于找 ...
- hiho1482出勤记录II（string类字符串中查找字符串，库函数的应用）
string类中有很多好用的函数,这里介绍在string类字符串中查找字符串的函数. string类字符串中查找字符串一般可以用: 1.s.find(s1)函数,从前往后查找与目标字符串匹配的第一个位 ...