快捷導(dǎo)航

JQuery事件冒泡和默認(rèn)行為代碼實(shí)例

更新時(shí)間：2020年05月13日 11:46:24 作者：陳太浪

這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

事件的冒泡

什么是事件的冒泡？

就是事件從子元素向父元素傳遞的一個(gè)過(guò)程

如何阻止事件的冒泡？

方式一：在事件的回調(diào)函數(shù)中加上return false;

方式二：在事件回調(diào)函數(shù)的形參列表中添加event，然后在回調(diào)函數(shù)中調(diào)用event.stopPropagation();.

事件的默認(rèn)行為

什么是事件的默認(rèn)行為？

就是像a標(biāo)簽?zāi)菢?，沒(méi)有綁定事件，但只要點(diǎn)擊了就會(huì)自動(dòng)跳轉(zhuǎn)的行為

像提交按鈕一樣，沒(méi)有綁定事件，但是點(diǎn)擊就會(huì)提交表單信息，自動(dòng)跳轉(zhuǎn)

如何阻止事件的默認(rè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事件的冒泡和默認(rèn)行為</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;  // 方式一
        // 阻止子元素點(diǎn)擊事件的冒泡
        event.stopPropagation();  // 方式二
      });


      $("input[type=submit]").click(function (event) {
        // return false;  // 方式一
        // 取消提交按鈕的默認(rèn)行為
        event.preventDefault();
      });

    });
</script>

運(yùn)行效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果,涉及jQuery針對(duì)頁(yè)面元素的運(yùn)算與樣式的動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下
2016-09-09
JQuery控制DIV的選取實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery控制DIV的選取實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細(xì)致，在這里推薦給小伙伴們。
2015-01-01
jQuery對(duì)象的selector屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的selector屬性用法,實(shí)例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
jquery關(guān)于表格及表格列隱藏和顯示問(wèn)題探討
本文為大家詳細(xì)介紹下關(guān)于指定表格及指定列的隱藏或顯示、獲取表格的列數(shù)等等表格相關(guān)的使用技巧，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
jQuery 打造動(dòng)態(tài)下滑菜單實(shí)現(xiàn)說(shuō)明
本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。
2010-04-04
jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果實(shí)戰(zhàn)（4）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
8款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
這篇文章收集了8款優(yōu)秀的響應(yīng)式 jQuery 幻燈片插件，它們能夠非常容易的集成到 Web 項(xiàng)目中。響應(yīng)式（Responsive）設(shè)計(jì)的目標(biāo)是要讓產(chǎn)品界面能夠響應(yīng)用戶的行為，根據(jù)不同終端設(shè)備自動(dòng)調(diào)整尺寸，帶給用戶良好的使用體驗(yàn)
2012-02-02