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中.add()的使用分析
Apr 26 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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入门小知识
2008/03/24 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python模块相关知识点小结
2020/03/09 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Linux文件操作命令都有哪些
2015/02/27 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
商务日语毕业生自荐信范文
2013/11/14 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
预备党员政审材料
2014/02/04 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
个性婚礼策划方案
2014/05/17 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
全陪导游词
2015/02/04 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
深入浅析Django MTV模式
2021/09/04 Python
各国货币符号大全
2022/02/17 杂记