1、事件冒泡
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //為 <span> 元素綁定 click 事件 $("span").click(function() { $("#msg").html($("#msg").html() + "<p>內(nèi)層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 --> <style type="text/css"> #content { background: #b17af5; } </style> </head> <!-- HTML --> <body> <div id="content"> 外層div元素<br /> <span style="background: silver;">內(nèi)層span元素</span><br /> 外層div元素 </div><br /> <div id="msg"></div> </body></html>當(dāng)點(diǎn)擊內(nèi)部 <span> 元素時(shí)，會(huì)觸發(fā)自身及外層 <div> 和 <body> 的點(diǎn)擊事件，這就是事件冒泡引起的。事件會(huì)隨著 DOM 的層次結(jié)構(gòu)依次向上傳播。
事件冒泡可能會(huì)引起意料之外的效果，有時(shí)候需要阻止事件的冒泡行為，使用 stopPropagation() 方法來(lái)實(shí)現(xiàn)。
修改 <span> 元素的 click 事件函數(shù)：
//為 <span> 元素綁定 click 事件$("span").click(function(event) { //為方法添加一個(gè)事件對(duì)象參數(shù) $("#msg").html($("#msg").html() + "<p>內(nèi)層span元素被單擊</p>"); event.stopPropagation(); //阻止 <span> 的 click 事件冒泡});此時(shí)點(diǎn)擊內(nèi)部 <span> 元素時(shí)，只會(huì)觸發(fā)自身的 click 事件，不會(huì)再向上冒泡。
2、阻止默認(rèn)行為
有時(shí)候用戶的操作未滿足某些條件時(shí)，需要阻止某些元素的默認(rèn)行為，如鏈接的跳轉(zhuǎn)和表單的提交等，jQuery 提供了 preventDefault() 方法來(lái)實(shí)現(xiàn)。
當(dāng)用戶未填寫(xiě)用戶名時(shí)，阻止表單提交：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $(":submit").click(function(event) { //為方法添加一個(gè)事件對(duì)象參數(shù) //當(dāng)未輸入用戶名時(shí)，提示并阻止提交 if ($(":text").val() == "") { $("#msg").text("用戶名不能為空"); event.preventDefault(); //阻止提交按鈕的默認(rèn)行為（提交表單） } }); }); </script> </head> <!-- HTML --> <body> <form action="register.action"> 用戶名<input type="text" name="id" /> <input type="submit" value="注冊(cè)" /> <div id="msg"></div> </form> </body></html>如果想同時(shí)阻止事件冒泡和阻止元素默認(rèn)行為，可以在事件函數(shù)中返回 false 來(lái)代替調(diào)用 stopPropagation() 和 preventDefault() 方法。
如：
$(":submit").click(function(event) { //為方法添加一個(gè)事件對(duì)象參數(shù) //當(dāng)未輸入用戶名時(shí)，提示并阻止提交 if ($(":text").val() == "") { $("#msg").text("用戶名不能為空"); return false; //阻止提交按鈕的默認(rèn)行為（提交表單）和事件冒泡 }});$("span").click(function(event) { //為方法添加一個(gè)事件對(duì)象參數(shù) $("#msg").html($("#msg").html() + "<p>內(nèi)層span元素被單擊</p>"); return false; //阻止 <span> 的 click 事件冒泡和默認(rèn)行為（此元素沒(méi)有默認(rèn)行為）});以上這篇淺談jQuery 中的事件冒泡和阻止默認(rèn)行為就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
