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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
怎么清空javascript数组
May 11 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP7 新增常量
2021/03/09 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
python分布式环境下的限流器的示例
2017/10/26 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python用SSH连接到网络设备
2021/02/18 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
个人自我鉴定范文
2013/10/04 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
财务管理专业自荐书
2014/09/02 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
工地食品安全责任书
2015/05/09 职场文书
淮海战役观后感
2015/06/11 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js