Jquery阻斷事件冒泡(轉載)

時間 2019-11-11

原文原文鏈接

JQuery阻止事件冒泡

冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。javascript

咱們在平時的開發過程當中，確定會遇到在一個div（這個div能夠是元素）包裹一個div的狀況，可是呢，在這兩個div上都添加了事件，若是點擊裏面的div咱們但願處理這個div的事件，可是呢，咱們不但願外層的div的事件也執行，這時候咱們就要用到阻止冒泡。html

通俗點來講吧，你在家裏看電視，躲在本身的小房間，可是你不但願聲音傳到隔壁父母的耳朵裏，這時候，你可能躲在被窩裏，或者牆壁的隔音效果很好，阻隔聲音能夠理解爲阻止冒泡。java

<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style>

　　<body>
　　　　　　<div id="content">
　　　　　　　　　　　　外層div
　　　　　　　　　　　　　　<div id="msg">
　　　　　　　　　　　　　　　　內層div
　　　　　　　　　　　　　　</div>
　　　　　　</div>jquery

　　</body>post

顯示結果url

對應的jQuery代碼以下：spa

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 爲內層div綁定click事件  $("#msg").click(function(){ alert("我是小div"); }); // 爲外層div元素綁定click事件  $("#content").click(function(){ alert("我是大div"); }); // 爲body元素綁定click事件  $("body").click(function(){ alert("我是body"); }); }); </script>

當點擊小div時，會觸發大div與body 的點擊事件。點擊大div時會觸發body的點擊事件。code

如何防止這種冒泡事件發生呢？orm

修改以下：htm

<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 爲內層div綁定click事件  $("#msg").click(function(event){ alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡  }); // 爲外層div元素綁定click事件  $("#content").click(function(event){ alert("我是大div"); event.stopPropagation(); // 阻止事件冒泡  }); // 爲body元素綁定click事件  $("body").click(function(event){ alert("我是body"); event.stopPropagation(); // 阻止事件冒泡  }); });

event.stopPropagation(); // 阻止事件冒泡

有時候點擊提交按鈕會有一些默認事件。好比跳轉到別的界面。可是若是沒有經過驗證的話，就不該該跳轉。這時候能夠經過設置event.preventDefault(); //阻止默認行爲 ( 表單提交 )。

html部分

 <body> <form action="test.html"> 用戶名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //獲取元素的值，val() 方法返回或設置被選元素的值。 var username = $("#username").val(); //判斷值是否爲空 if(username==""){ //提示信息 //alert("文本框的值不能爲空");  $("#msg").html("<p>文本框的值不能爲空.</p>"); //阻止默認行爲 ( 表單提交 )  event.preventDefault(); } }); }); </script>

//阻止默認行爲 ( 表單提交 )
                    event.preventDefault();

還有一種防止默認行爲的方法就是return false。效果同樣。

代碼以下：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //獲取元素的值，val() 方法返回或設置被選元素的值。 var username = $("#username").val(); //判斷值是否爲空 if(username==""){ //提示信息 //alert("文本框的值不能爲空");  $("#msg").html("<p>文本框的值不能爲空.</p>"); //阻止默認行爲 ( 表單提交 ) //event.preventDefault();  ; } }); }); </script>

同理，上面的冒泡事件也能夠經過return false來處理。

 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 爲內層div綁定click事件  $("#msg").click(function(event){ alert("我是小div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 爲外層div元素綁定click事件  $("#content").click(function(event){ alert("我是大div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 爲body元素綁定click事件  $("body").click(function(event){ alert("我是body"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。