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轻松实现Ajax的实例代码
Aug 16 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
javascript数据类型示例分享
Jan 19 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
PHP新手上路(十一)
2006/10/09 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
原生python实现knn分类算法
2019/10/24 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Java面试题及答案
2012/09/08 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
文明礼仪演讲稿
2014/05/12 职场文书
三八妇女节寄语
2015/02/27 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python