jquery的冒泡事件
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冒泡事件</title> <script type="text/javascript" src="../js/jquery.js" ></script> <script> $(function(){ $("#content span").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("#content").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("body").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) }) </script> </head> <body> <div id="content"> <span>我來觸發冒泡</span> </div> <div id="msg"></div> </body> </html>
上面的程式碼中當你單擊span標籤的時候就會觸發#content和body的單擊事件。這種情況稱為冒泡事件。
要消除這種情況可以使用事件物件。
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冒泡事件</title> <script type="text/javascript" src="../js/jquery.js" ></script> <script> $(function(){ $("#content span").bind("click",function(event){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); event.stopPropagation(); }) $("#content").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("body").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) }) </script> </head> <body> <div id="content"> <span>我來觸發冒泡</span> </div> <div id="msg"></div> </body> </html>
在阻止預設的事件是可以使用
event.preventDefault() ;或者
return false;或者
event.stopPropagation();
相關文章
- JQuery6:事件冒泡jQuery事件
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- 事件的冒泡事件
- JavaScript 事件冒泡JavaScript事件
- stopPropagation() 阻止事件冒泡事件
- JavaScript阻止事件冒泡JavaScript事件
- 理解js的事件冒泡和事件捕獲JS事件
- 事件的捕獲、冒泡、委託事件
- JS中的事件順序(事件捕獲與冒泡)JS事件
- 梳理下常見的不冒泡事件事件
- Javascript中的事件冒泡與捕獲JavaScript事件
- 關於js事件冒泡和事件捕獲JS事件
- zepto繫結事件改變冒泡事件流事件
- 原生js如何阻止事件冒泡JS事件
- jQuery 事件jQuery事件
- jquery事件jQuery事件
- vue的事件冒泡 最詳細解釋版本Vue事件
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- JavaScript事件捕獲冒泡與捕獲JavaScript事件
- jQuery 事件方法jQuery事件
- jquery自定義事件的使用jQuery事件
- 36. jQuery 事件jQuery事件
- jQuery事件監聽jQuery事件
- 常用的jQuery事件有幾種?jQuery事件
- jQuery select 觸發事件jQuery事件
- jquery獲取回車事件jQuery事件
- JQuery的一些常用事件jQuery事件
- jQuery學習筆記02--讀取和操作屬性,讀取和操作屬性節點,新增、刪除、改變類,操作html、css、value,操作事件,事件冒泡及阻止事件冒泡,預設行為及阻止預設行為,自動觸發事件jQuery筆記HTMLCSS事件
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- JQuery4:滑鼠事件和滾動事件jQuery事件
- 初步學習jQuery之事件jQuery事件
- JQuery7:事件委託jQuery事件
- 使用 jQuery 觸發 Vue 事件jQueryVue事件
- jQuery基本功能——事件jQuery事件
- jquery複習之路---事件篇jQuery事件
- jquery鍵盤常見事件---jQuery事件
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- jQuery事件中on實現繫結多個事件jQuery事件
- jQuery事件物件event的屬性和方法jQuery事件物件