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学习笔记之Helloworld
Dec 22 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
vuex actions异步修改状态的实例详解
Nov 06 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加密解密函数(动态加密)
2013/06/19 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Python发送Email方法实例
2014/08/21 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python实现简单温度转换的方法
2015/03/13 Python
Python max内置函数详细介绍
2016/11/17 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
《诚实与信任》教学反思
2014/04/10 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
生活小常识广播稿
2015/08/19 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang