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 1.0.2
Oct 11 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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-MySQL教程归纳总结
2008/06/07 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
小学亲子活动总结
2014/07/01 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers