JQuery事件冒泡和預設行為程式碼例項
阿新 • • 發佈：2020-05-14
事件的冒泡
什麼是事件的冒泡？
就是事件從子元素向父元素傳遞的一個過程
如何阻止事件的冒泡？
方式一：在事件的回撥函式中加上return false;
方式二：在事件回撥函式的形參列表中新增event，然後在回撥函式中呼叫event.stopPropagation();.
事件的預設行為
什麼是事件的預設行為？
就是像a標籤那樣，沒有繫結事件，但只要點選了就會自動跳轉的行為
像提交按鈕一樣，沒有繫結事件，但是點選就會提交表單資訊，自動跳轉
如何阻止事件的預設行為？
方式一：在事件的回撥函式中加上return false;
方式二：在事件回撥函式的形參列表中新增event，然後在回撥函式中呼叫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>執行效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。