浅谈jQuery 中的事件冒泡和阻止默认行为
1、事件冒泡
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%> <% Stringpath=request.getContextPath(); StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <scripttype="text/javascript"src="js/jquery-1.7.2.js"></script> <scripttype="text/javascript"> $(function(){ //为<span>元素绑定click事件 $("span").click(function(){ $("#msg").html($("#msg").html()+"<p>内层span元素被单击</p>"); }); //为Id为content的<div>元素绑定click事件 $("#content").click(function(){ $("#msg").html($("#msg").html()+"<p>外层div元素被单击</p>"); }); //为<body>元素绑定click事件 $("body").click(function(){ $("#msg").html($("#msg").html()+"<p>body元素被单击</p>"); }); }); </script> <!--CSS--> <styletype="text/css"> #content{ background:#b17af5; } </style> </head> <!--HTML--> <body> <divid="content"> 外层div元素<br/> <spanstyle="background:silver;">内层span元素</span><br/> 外层div元素 </div><br/> <divid="msg"></div> </body> </html>
当点击内部<span>元素时,会触发自身及外层<div>和<body>的点击事件,这就是事件冒泡引起的。事件会随着DOM的层次结构依次向上传播。
事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为,使用stopPropagation()方法来实现。
修改<span>元素的click事件函数:
//为<span>元素绑定click事件 $("span").click(function(event){ //为方法添加一个事件对象参数 $("#msg").html($("#msg").html()+"<p>内层span元素被单击</p>"); event.stopPropagation(); //阻止<span>的click事件冒泡 });
此时点击内部<span>元素时,只会触发自身的click事件,不会再向上冒泡。
2、阻止默认行为
有时候用户的操作未满足某些条件时,需要阻止某些元素的默认行为,如链接的跳转和表单的提交等,jQuery提供了preventDefault()方法来实现。
当用户未填写用户名时,阻止表单提交:
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%> <% Stringpath=request.getContextPath(); StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <scripttype="text/javascript"src="js/jquery-1.7.2.js"></script> <scripttype="text/javascript"> $(function(){ $(":submit").click(function(event){ //为方法添加一个事件对象参数 //当未输入用户名时,提示并阻止提交 if($(":text").val()==""){ $("#msg").text("用户名不能为空"); event.preventDefault(); //阻止提交按钮的默认行为(提交表单) } }); }); </script> </head> <!--HTML--> <body> <formaction="register.action"> 用户名<inputtype="text"name="id"/> <inputtype="submit"value="注册"/> <divid="msg"></div> </form> </body> </html>
如果想同时阻止事件冒泡和阻止元素默认行为,可以在事件函数中返回false来代替调用stopPropagation()和preventDefault()方法。
如:
$(":submit").click(function(event){ //为方法添加一个事件对象参数 //当未输入用户名时,提示并阻止提交 if($(":text").val()==""){ $("#msg").text("用户名不能为空"); returnfalse; //阻止提交按钮的默认行为(提交表单)和事件冒泡 } });$("span").click(function(event){ //为方法添加一个事件对象参数 $("#msg").html($("#msg").html()+"<p>内层span元素被单击</p>"); returnfalse; //阻止<span>的click事件冒泡和默认行为(此元素没有默认行为) });
以上这篇浅谈jQuery中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。