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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
详解React 条件渲染
Jul 08 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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之Smarty入门
2007/01/04 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
php中设置多级目录session的问题
2011/08/08 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
js实现随机8位验证码
2020/07/24 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python执行时间的几种计算方法
2020/07/31 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
老同学聚会感言
2014/02/23 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技