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中的事件机制
Jun 04 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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 判断网页是否是utf8编码的方法
2014/06/06 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python实现神经网络感知器算法
2017/12/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python批量赋值操作实例
2018/10/22 Python
python 自定义对象的打印方法
2019/01/12 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python中的整除和取模实例
2020/06/03 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
实习鉴定评语
2014/01/19 职场文书
实习指导老师评语
2014/04/26 职场文书
2014年班干部工作总结
2014/11/25 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
灵魂歌王观后感
2015/06/17 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python