JQuery事件冒泡和默認行為代碼實例
更新時間：2020年05月13日 11:46:24 作者：陳太浪
這篇文章主要介紹了JQuery事件冒泡和默認行為代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
事件的冒泡
什么是事件的冒泡？
就是事件從子元素向父元素傳遞的一個過程
如何阻止事件的冒泡？
方式一：在事件的回調(diào)函數(shù)中加上return false;
方式二：在事件回調(diào)函數(shù)的形參列表中添加event，然后在回調(diào)函數(shù)中調(diào)用event.stopPropagation();.
事件的默認行為
什么是事件的默認行為？
就是像a標簽?zāi)菢樱瑳]有綁定事件，但只要點擊了就會自動跳轉(zhuǎn)的行為
像提交按鈕一樣，沒有綁定事件，但是點擊就會提交表單信息，自動跳轉(zhuǎn)
如何阻止事件的默認行為？
方式一：在事件的回調(diào)函數(shù)中加上return false;
方式二：在事件回調(diào)函數(shù)的形參列表中添加event，然后在回調(diào)函數(shù)中調(diào)用event.stopPropagation();.
示例代碼
HTML以及css代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23-jQuery事件的冒泡和默認行為</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
background-color: brown;
}
.son{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<form action="http://www.baidu.com">
<input type="text">
<input type="submit" value="提交">
</form>
</body>
</html>
JavaScript代碼（用到了jquery-1.11.3.js）
<script src="../js/jquery-1.11.3.js"></script>
<script>
$(function () {
$(".father").click(function () {
alert("father");
});
$(".son").click(function (event) {
alert("son");
// return false; // 方式一
// 阻止子元素點擊事件的冒泡
event.stopPropagation(); // 方式二
});
$("input[type=submit]").click(function (event) {
// return false; // 方式一
// 取消提交按鈕的默認行為
event.preventDefault();
});
});
</script>
運行效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)的手機發(fā)送驗證碼倒計時效果代碼分享
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)手機注冊發(fā)送驗證碼倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果,涉及jQuery針對頁面元素的運算與樣式的動態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄狫Query控制DIV的選取實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細致，在這里推薦給小伙伴們。2015-01-01
這篇文章主要介紹了jQuery對象的selector屬性用法,實例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery 實現(xiàn)扁平式小清新導(dǎo)航，文中示例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
本文為大家詳細介紹下關(guān)于指定表格及指定列的隱藏或顯示、獲取表格的列數(shù)等等表格相關(guān)的使用技巧，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
jQuery 打造動態(tài)下滑菜單實現(xiàn)說明
本教程將分步講解如何使用JQuery和CSS打造一個炫酷動感菜單。2010-04-04
jQuery實現(xiàn)標簽頁效果實戰(zhàn)（4）
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)標簽頁效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
這篇文章收集了8款優(yōu)秀的響應(yīng)式 jQuery 幻燈片插件，它們能夠非常容易的集成到 Web 項目中。響應(yīng)式（Responsive）設(shè)計的目標是要讓產(chǎn)品界面能夠響應(yīng)用戶的行為，根據(jù)不同終端設(shè)備自動調(diào)整尺寸，帶給用戶良好的使用體驗2012-02-02