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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript入门教程基础篇
Nov 16 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 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
长波知识介绍
2021/03/01 无线电
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php生成随机颜色的方法
2014/11/13 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php自定义时间转换函数示例
2016/12/07 PHP
如何打开php的gd2库
2017/02/09 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
js new Date()实例测试
2019/10/31 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
个人实习生的自我评价
2014/02/16 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
毕业生个人总结
2015/02/28 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏