js阻止默认浏览器行为与冒泡行为的实现代码


Posted in Javascript onMay 15, 2016

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

1. 阻止浏览器的默认行为

function stopDefault(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.preventDefault) { 
//阻止默认浏览器动作(W3C) 

e.preventDefault(); 
} else { 

//IE中阻止函数器默认动作的方式 

window.event.returnValue = false; 
} 
return false; 
}

2. 停止事件冒泡

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.stopPropagation) { 
//因此它支持W3C的stopPropagation()方法 

e.stopPropagation(); 
} else { 

//否则,我们需要使用IE的方式来取消事件冒泡 

window.event.cancelBubble = true; 
} 
return false; 
}

具体应用实例:写好的一个项目,今天交给用户使用,返回了一大堆问题,其中有一个很精典:

一个页面,有一个表单,用来提交表单的按钮是个button,用jquery来响应这个按钮的点击动作,通过post提交,供用户输入的是一个文本框,用户输入完要填的东西之后,直接按回车键,就相当于按了那个button,刚开始没注意这个问题,一按回车,就跳转到了另外一个页面,查了很多资料,才发现要阻止浏览器的默认行为,,因为SUBMIT的默认行为是提交表单,那么你的JS就不会执行了。所以先取消默认行为。然后执行你的JQ来提交。具体的我也说不清楚,只知道若文本框的type="submit",直接点击按钮的时候就会跳到另外一个页面,若type="button",则点击按钮的时候不会出现这样的情况,可按回车键的时候会跳到另外一个页面,解决方法,看下面代码:

<input type="text" name="appGrpName_s" id="appGrpName_s" onkeydown="enter_down(this.form, event);"/>

<script type="text/javascript"> 
function enter_down(form, event) { 
if(event.keyCode== "13") { 
stopDefault(event); 
submitForm(form,'actionDiv'); 
} 
} 
function stopDefault(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.preventDefault) { 
//阻止默认浏览器动作(W3C) 

e.preventDefault(); 
} else { 

//IE中阻止函数器默认动作的方式 

window.event.returnValue = false; 
} 
return false; 
} 
</script>

通过上面的代码就可以实现按回车的时候相当于点击“提交”按钮。且上面的代码兼容IE、FF浏览器。

有时候遇到需要屏蔽浏览器的一些快捷键行为时,比如说:ff下按Backspace键,会跳到上一个浏览器的历史记录页面;

注意要在onkeydown事件中调用stopDefault(event)函数,在onkeyup事件中调用是不成功的。

<span style="color: rgb(51, 153, 51);"><</span>a onclick<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"toggleFriendFuncList(event, '6708062', 'he');"</span><span style="color: rgb(51, 153, 51);">></</span>a<span style="color: rgb(51, 153, 51);">></span>

由于href是空值,如果不阻止浏览器的默认行为,产生的效果就是刷新页面。

现在我们需要做的就是阻止href的链接事件,而去执行onclick事件。

老的处理方式:

<span style="color: rgb(51, 153, 51);"><</span>a onclick<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"toggleFriendFuncList(event, '6708062', 'he');"</span> href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 204);">"javascript:void(0);"</span><span style="color: rgb(51, 153, 51);">></</span>a<span style="color: rgb(51, 153, 51);">></span>

jquery的写法:

1)return false :In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中,可以阻止默认事件和冒泡事件。

2)event.preventDefault():In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。

3)event.stopPropagation():In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中,可以阻止冒泡但是允许默认事件的发生

prototype的写法:

Event.stop(event)
用法介绍:
事件发生后,浏览器通常首先触发事件发生元素上的事件处理程序,然后是它的父元素,父元素的父元素……依此类推,直到文档的根元素为止。这被称为 事件冒泡,是事件传播的最常见的方式。当处理好一个事件后,你可能想要停止事件的传播,不希望它继续冒泡。
当你的程序有机会处理事件时,如果这个事件具有 默认行为,同时浏览器也会处理它。例如,点击导航链接、将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式,可能会非常希望阻止相关的默认行为。

但是,有时候还是不能解决相应的问题,明明已经调用了阻止浏览器默认行为的方法,可在按回车的时候还是会调用默认行为,最终也没有找到问题所在,只好把回车键禁用了,实际上是用Tab键代替回车键。代码如下:

<script language="javascript" event="onkeydown" for="document"> 
//若为回车键 
if ( event.keyCode == 13 ) { 
//改成Tab键,这样每次按回车都起到了Tab的功效,光标跳到下一个对象 
event.keyCode = 9; 
} 
</script> 
<script language="javascript" type="text/javascript"> 
//禁用Enter键表单自动提交 
document.onkeydown = function(event) { 
var target, code, tag; 
if (!event) { 
event = window.event; //针对ie浏览器 
target = event.srcElement; 
code = event.keyCode; 
if (code == 13) { 
tag = target.tagName; 
if (tag == "TEXTAREA") { return true; } 
else { return false; } 
} 
} 
else { 
target = event.target; //针对遵循w3c标准的浏览器,如Firefox 
code = event.keyCode; 
if (code == 13) { 
tag = target.tagName; 
if (tag == "INPUT") { return false; } 
else { return true; } 
} 
} 
}; 
</script>

具体用法试例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ include file="/pages/common/global.jsp"%> 
<html> 
<head> 
<title>三水点靠木</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<script> 
function gotoPage(currentPage,form) { 
goto_Page(currentPage,form,"actionDiv"); 
} 
function addAppGrp(){ 
$("#actionDiv").load("${contextPath }/pages/manage/business/add.jsp"); 
$("#chance_search_div").hide(); 
} 
function modifyAppGrp(idName){ 
var id=encodeURIComponent(idName); 
var url = contextName + "/appGrpAction.do?method=addAppGrp&appGrpName="+id; 
retrieveURL(url,'actionDiv'); 
$("#chance_search_div").hide(); 
} 
function savebusiness(thisForm){ 
var name = $("#appGrpName").val(); 
if(name.trim()==""){ 
alert("分组名称不能为空。"); 
return; 
} 
submitForm(thisForm,null,afterSave); 
return ; 
} 
function afterSave(content){ 
if(content!=null&&content!=""){ 
var arr = content.split(","); 
if(arr[0]=="true"){ 
$("#chance_search_div").show(); 
//当前结点 
var itemId = "0::" + $("#appGrpName").val(); 
//父结点,因为只有添加根应用分组时才会执行这个方法,所以父结点统一为-1 
var parentId = -1; 
//当前结点显示名称 
var itemText = $("#appGrpName").val(); 
//添加新结点 
tree.insertNewChild(parentId, itemId, itemText, doOnClick, 'myfolderClosed.gif' ,'myfolderOpen.gif','myfolderClosed.gif'); 
retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); 
return; 
} 
alert(arr[1]); 
return; 
} 
alert("保存失败"); 
return; 
} 
function deleteBusiness(thisForm,idName){ 
if(confirm("确认要删除么?")){ 
var id=encodeURIComponent(idName); 
retrieveURL("${contextPath}/appGrpAction.do?method=deleteAppGrp&appGrpName=" + id,null,null,function(content){ 
if(content!=null&&content!=""){ 
var arr = content.split(","); 
if(arr.length==3&&arr[2]=='y'){ 
var msg = "该应用组下有应用,要强制删除么?"; 
if(confirm(msg)){ 
retrieveURL("${contextPath}/appGrpAction.do?method=forceDelAppGrp&appGrpName="+id,null,null,afterForceDel); 
} 
return; 
} 
if(arr.length==2){ 
if(arr[0]=="true"){ 
//当前结点 
itemId = "0::" + idName; 
tree.deleteItem(itemId); 
retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); 
return; 
} 
alert(arr[1]); 
} 
return; 
} 
alert("删除失败"); 
return; 
}); 
return ; 
} 
} 
function afterForceDel(){ 
if(content!=null&&content!=""){ 
var arr = content.split(","); 
if(arr[0]=="true"){ 
monitorTree(); 
retrieveURL("${contextPath}/appGrpAction.do?method=appGrpList","actionDiv"); 
return; 
} 
alert(arr[1]); 
return; 
} 
alert("保存失败"); 
return; 
} 
function enter_down(form, event) { 
if(event.keyCode== "13") { 
stopDefault(event); 
submitForm(form,'actionDiv'); 
} 
} 
function stopDefault(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if(e && e.preventDefault) { 
//阻止默认浏览器动作(W3C) 

e.preventDefault(); 
} else { 

//IE中阻止函数器默认动作的方式 

window.event.returnValue = false; 
} 
return false; 
} 
</script> 
</head> 
<body> 
<table style="width: 100%; align: center;"> 
<tr> 
<td style="text-align:left;"> 
<div id="chance_search_div"> 
<html:form action="appGrpAction.do?method=appGrpList"> 
<table class="form_t"> 
<tr> 
<th class="tablelogo"> 查询 
<input type="hidden" name="hidden_s" value="1" /> 
</th> 
</tr> 
<tr> 
<td style="text-align: left; padding-left: 50px;"> 
<br /> 
名称 
<input type="text" name="appGrpName_s" id="appGrpName_s" 
onblur="javascript:isSpecialChar(this);" onkeydown="enter_down(this.form, event);"/> 
<input type="button" class="button4C" value="查 询" 
onclick="javascript:submitForm(this.form,'actionDiv');" /> 
<input type="button" value="添 加" class="button4C" onclick="javascript:addAppGrp();"/> 
<br /> 
</td> 
</tr> 
</table> 
</html:form> 
</div> 
<div id="actionDiv"></div> 
</td> 
</tr> 
</table> 
<script><!-- 
$("#actionDiv").load("${contextPath }/appGrpAction.do?method=appGrpList&random=" + Math.random()); 
--></script> 
</body> 
</html>

以上这篇js阻止默认浏览器行为与冒泡行为的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
JavaScript绑定事件监听函数的通用方法
May 14 #Javascript
易被忽视的js事件问题总结
May 14 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
美容院考勤制度
2014/01/30 职场文书
市场开发计划书
2014/05/07 职场文书
团队队名口号大全
2014/06/06 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
2019秋季运动会口号
2019/06/25 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android