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 相关文章推荐
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python提取页面内url列表的方法
2015/05/25 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
django连接oracle时setting 配置方法
2019/08/29 Python
web页面录屏实现
2019/02/12 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
财务会计专业应届毕业生求职信
2013/10/18 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
审计主管岗位职责
2014/01/31 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
爱心募捐感谢信
2015/01/22 职场文书
团代会闭幕词
2015/01/28 职场文书
办公室主任岗位职责
2015/01/31 职场文书
军训新闻稿范文
2015/07/17 职场文书