javascript阻止事件冒泡和浏览器的默认行为


Posted in Javascript onJanuary 21, 2017

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

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
  //因此它支持W3C的stopPropagation()方法 
  e.stopPropagation(); 
else
  //否则,我们需要使用IE的方式来取消事件冒泡 
  window.event.cancelBubble = true; 
}

2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

//阻止浏览器的默认行为 
function stopDefault( e ) { 
  //阻止默认浏览器动作(W3C) 
  if ( e && e.preventDefault ) 
    e.preventDefault(); 
  //IE中阻止函数器默认动作的方式 
  else
    window.event.returnValue = false; 
  return false; 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script language="javascript" type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('div.c1').click(function(e){alert('单击了div');});
$('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
$(document).click(function(e){alert('单击了document');});
$('#txt1').val('123');
$('#txt1').click(function(e){stopBubble(e);});
$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
})
function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
  if ( e && e.stopPropagation ) 
  //因此它支持W3C的stopPropagation()方法 
  e.stopPropagation(); 
   else 
  //否则,我们需要使用IE的方式来取消事件冒泡 
  window.event.cancelBubble = true; 
} 
//阻止浏览器的默认行为 
function stopDefault( e ) { 
  //阻止默认浏览器动作(W3C) 
  if ( e && e.preventDefault ) 
    e.preventDefault(); 
  //IE中阻止函数器默认动作的方式 
  else 
    window.event.returnValue = false; 
  return false; 
}
</script>
<style type="text/css">
body{
font-size:14px;
  }
}
.c1{
  font-family:"Arial Unicode MS"
  }
.c2{
  font-family:helvetica,simsun,arial,clean
  }
</style>
</head>
<body>
<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
<div><input id="txt1" name="Text1" type="text" /></div><hr/>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 #Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 #Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 #Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 #Javascript
JavaScript数组去重的6个方法
Jan 21 #Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 #Javascript
JS常用知识点整理
Jan 21 #Javascript
You might like
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python实现发送邮件功能代码
2017/12/14 Python
Python flask框架post接口调用示例
2019/07/03 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
优秀士兵个人事迹材料
2014/01/19 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
管理工程专业求职信
2014/08/10 职场文书
环境保护建议书
2014/08/26 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
MYSQL 运算符总结
2021/11/11 MySQL