js事件冒泡--通俗易懂

阿新 • • 發佈：2020-12-29

技術標籤：jquery

①父元素的事件阻止子元素觸發，父元素繫結完事件後return false
②子元素事件防止父元素觸發，子元素需新增stopPropagation()
下面是自己寫的小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        #one{width:400px;height:400px;background-color: red;}
        #two{width:200px;height:200px;background-color: green;}
        #three{width:50px; 
height:50px;background-color: blue;}
    </style>
</head>
<body>
    <div id="one">
        一區
        <div style="background-color: yellow;width:300px;height:300px;" id="test">子元素群
        <div id="two">二區
            <div id="three" 
>三區</div>
        </div>
        </div>
    </div>
    <script>
        $("#one").click(function(e){
            console.log("one")
            return false
        })
        $("#two").click(function(e){
            console.log("two")
            return false
        })
        $("#three").click(function(e){
            e.stopPropagation()
            console.log("three")
        })
    </script>
</body>
</html>

以前傻乎乎的以為父元素對孫子曾孫子會阻止事件，其實在父元素中，子元素主動e.stopPropagation()，該子元素才不會受父元素的事件影響

js事件冒泡--通俗易懂

技術標籤：jquery ①父元素的事件阻止子元素觸發，父元素繫結完事件後return false ②子元素事件防止父元素觸發，子元素需新增stopPropagation() 下面是自己寫的小案例

js 事件冒泡和事件捕獲

轉載：https://blog.csdn.net/weixin_41646716/article/details/81099880 一塊：事件流描述的是從頁面接收事件的順序。IE的事件是冒泡事件流，而firefox的事件流是捕獲事件流。1.事件冒泡IE的事件流叫做事件冒泡，即

JS事件冒泡和事件捕獲

上篇筆記提到了事件的修飾符，其中不少是與事件冒泡相關的，於是這篇來大致總結一下。

JS事件冒泡與事件捕獲

事件捕獲與事件冒泡：事件捕獲：由微軟公司提出，事件從文件根節點（Document 物件）流向目標節點，途中會經過目標節點的各個父級節點，並在這些節點上觸發捕獲事件，直至到達事件的目標節點；

js事件機制----捕獲與冒泡機制例項分析

本文例項講述了js事件機制----捕獲與冒泡機制。分享給大家供大家參考，具體如下：

js的事件冒泡、捕獲、目標和事件的相容

在js中，事件的寫法有三種，這也是件事的相容。 1.addEventListener var div=document.querySelector("div");

JS的事件冒泡和事件捕獲

DOM事件流三個階段 1.事件捕獲：當滑鼠觸發DOM事件時，瀏覽器會從根節點由外到內進行事件傳播。即觸發子元素的事件，父元素會通過事件捕獲的方式優先觸發父元素的事件。

js get post區別通俗易懂

先了解一下HTTP 1，HTTP (1)基於tcp/ip、一種網路應用層協議、超文字傳輸協議HyperText Transfer Protocol (2)工作方式：客戶端請求服務端應答的模式 (3)快速：無狀態連線 (4)靈活：可以傳輸任意物件，物件

【程式設計鹿】學Vue.js這一篇就夠了「萬字學會|通俗易懂」

vue概述 mvvm模式 image-20201001110548401 M：即Model，模型，包括資料和一些基本操作V：即View，檢視，頁面渲染結果VM：即View-Model，模型與檢視間的雙向操作（無需開發人員干涉）

【程式設計鹿】學Vue.js這一篇就夠了「萬字學會|通俗易懂」下篇

1540394364528 路由vue-router 場景模擬現在我們來實現這樣一個功能：一個頁面，包含登入和註冊，點選不同按鈕，實現登入和註冊頁切換。

js中什麼是事件冒泡？

在一個物件上觸發某類事件，這個事件會向這個物件的的父級傳播，從裡到外，直至它被處理或者到達了物件層次的最頂層，即document物件。這個過程就是JavaScript的事件冒泡。

JS阻止事件冒泡

技術標籤：前端開發JSjs 阻止事件冒泡 function stopBubble(e) { //如果提供了事件物件，則這是一個非IE瀏覽器

Js阻止事件冒泡與阻止預設事件：理解stopPropagation()，preventDefault()，return false的區別

1.event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程式被執行。不讓事件向documen上蔓延，但是預設事件任然會執行，當你掉用這個方法的時候，如果點選一個連線

js模擬dom失去焦點，阻止事件冒泡

需求：　　點選div，將mouseListening改變為：true 　　點選除div外其他區域，將mouseListening改變為：false

淺析js中事件冒泡與事件捕獲

目錄01-事件冒泡1.1-事件冒泡介紹1.2-事件冒泡利用（事件委託）1.3-事件冒泡影響與阻止事件冒泡02-事件捕獲1.1-事件捕獲介紹1.2-事件三個階段01-事件冒泡

js阻止冒泡事件發生例項

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>#one{width: 300px;height: 300px;background: red;}#two{width: 200px;

Js阻止事件冒泡與阻止預設事件

1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件處理程式被執行。不讓事件向documen上蔓延，但是預設事件任然會執行，當你掉用這個方法的時候，如果點選一個連線

VUE3 之元件間事件通訊 - 這個系列的教程通俗易懂，適合新手

1. 概述相關定律告訴我們：這個世界上的任何事物之間都會存在一定聯絡，“城門失火，殃及池魚”就是一個很好的例子。因此如果我們能夠儘早發現這些看不見的聯絡，就能很好的解決更多遇見的難題。

JS 事件捕獲與事件冒泡

事件捕獲與事件冒泡 <script> function showTagName() { alert(\"事件捕獲: \" + this.tagName);

一文解析Spring事務管理詳解；通俗易懂，輕鬆掌握！

事務概念回顧什麼是事務？事務是邏輯上的一組操作，要麼都執行，要麼都不執行.

js事件冒泡--通俗易懂

相關推薦