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 post传递数组方法实现思路及代码
Apr 28 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue elementUI批量上传文件
Apr 26 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
全面理解闭包机制
2016/07/11 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
2014年3.15团委活动总结
2014/03/16 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
如何利用Python实现一个论文降重工具
2021/07/09 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server