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 相关文章推荐
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 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扩展图文教程
2008/12/12 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php实现文件下载代码分享
2014/08/19 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
django数据库自动重连的方法实例
2019/07/21 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python如何判断IP地址合法性
2020/04/05 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Java中compareTo和compare的区别
2016/04/12 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
安全生产投入制度
2014/01/29 职场文书
有趣的广告词
2014/03/18 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
公司租房协议书
2014/10/14 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python