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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript实现简易计算器的代码
May 31 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
javaScript封装的各种写法
Aug 14 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
详解vue在项目中使用百度地图
Mar 26 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自定义加密与解密程序实例
2014/12/31 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js脚本实现数据去重
2014/11/27 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python中count函数简单用法
2020/01/05 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
银行主办会计岗位职责
2014/08/13 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
承租经营合作者协议书
2014/10/01 职场文书
收费员岗位职责
2015/02/14 职场文书
保研导师推荐信
2015/03/25 职场文书
就业导师推荐信范文
2015/03/27 职场文书
电工生产实习心得体会
2016/01/22 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技