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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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接收POST数据,解析json数据
2013/06/28 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
js查找父节点的简单方法
2008/06/28 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
python显示生日是星期几的方法
2015/05/27 Python
python实现计算倒数的方法
2015/07/11 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
python Tkinter版学生管理系统
2019/02/20 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python如何实现FTP功能
2020/05/28 Python
python集合能干吗
2020/07/19 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
招商专员岗位职责
2014/02/08 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
考博专家推荐信
2014/05/10 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android