preventDefault,stopPropagation,return false三者的區別

bladefury 發布于2019-08-20 19:05 / 2730人閱讀

摘要：與之順序相反的是事件捕獲。可以理解為是的升級版，除了阻止冒泡，還能阻止結束掉當前對象未執行的其它綁定事件方法。作者以樂之名本文原創，有不當的地方歡迎指出。參考文章之間的區別

逛帖子的時候看到道友發的前端面試題，

preventDefault(), stopPropagation(), return false三者的區別

這三者的使用想必大家并不陌生，但是細想之下還是有可究之處。

preventDefault()

阻止元素在瀏覽器中的默認行為

網站
$("#link").click(function(event){
    event.preventDefault(); // 阻止了a鏈接href的訪問或跳轉
})

stopPropagation()

事件冒泡：當一個元素上的事件被觸發時，比如鼠標點擊了一個按鈕，同樣的事件將會在該按鈕元素的所有父級／祖先元素上觸發。這一個過程就被稱為事件冒泡。它是由子級元素先觸發，父級元素后觸發，由內而外（由下往上）的一個流程。與之順序相反的是事件捕獲。

事件捕獲：父級元素先觸發，子級元素后觸發，在此僅做了解。


  
    事件冒泡例子

$("#btn").click(function(event){ event.stopPropagation(); // 阻止了事件冒泡，不會觸發"#inner, body"的點擊事件 console.log("#btn") }) $("#inner").click(function(event){ // #btn 阻止了冒泡，這里不會執行 // 如果不使用stopPropagation, 當#btn點擊時，這里也會執行 console.log("#inner") }) $("body").click(function(event){ // #btn 阻止了冒泡，.btn點擊不會影響到我 // 如果不使用stopPropagation, 當#btn點擊時，這里也會執行 console.log("body") }) // 使用了stopPropagation()輸出 "#btn" // 不使用stopPropagation()輸出 "#btn" "#inner" "body" stopImmediatePropagation()

阻止對象綁定的剩余的事件處理函數方法的執行，并阻止當前事件的冒泡。
可以理解為stopImmediatePropagation是stopPropagation的升級版，除了阻止冒泡，還能阻止結束掉當前對象未執行的其它綁定事件方法。

jQuery中一個對象可以綁定多個事件方法，執行順序會按照綁定的先后順序來執行


    
        stopImmediatePropagation()例子
        


$("body").click(function(event){
    // body 點擊
    console.log("body");
});

$("#inner").click(function(event){
    // #inner 點擊
    console.log("#inner");
})

$("#btn").click(function(event){
    // 第一個#btn點擊
    e.stopImmediatePropagation();
    console.log("#btn 1");
})

$("#btn").click(function(event){
    // 第二個#btn點擊
    console.log("#btn 2")
})

// 最終輸出
"#btn 1" // (因為stopImmediatePropagation阻止了#btn綁定的剩余未執行的事件方法，并且阻止了冒泡)

// 如果不使用stopImmediatePropagation， 將輸出
"#btn 1"
"#btn 2"
"#inner"
"body"
同個對象執行順序按綁定順序執行，冒泡則由內向外執行

return false

“return false” 相信不少同學會用來阻止元素在瀏覽器中的默認行為，
拿它當preventDefault()使用，但其實“return false”做的事情不僅僅只是阻止默認行為

當調用“return false”時，它執行了以下三件事情


event.preventDefault()

event.stopPropagation()

停止回調函數執行并立即返回

1，2點還好理解，那么第3點是怎么回事？
return語句會終止函數的執行并返回函數的值。所以不管是否返回false或是其它值，return語句后面的代碼都不會執行。而返回false，使它具備了preventDefault和stropPropagation的功能

$("a").click(function(){
    return false; // return false直接返回了，并不會執行alert
    alert("我沒有被彈出來");
})

// preventDefault 和 stopPropagation 并不會阻止回調函數的執行

總結

很多jQuery教程在代碼演示中用“return false”來阻止執行瀏覽器的默認行為。
久而久之，很多同學習慣濫用“return false”來代替preventDefault

大多數情況下，我們僅僅是想要它執行跟preventDefault的功能而已，但它卻自作主張地幫你執行了另外兩步操作。
比較好的編程習慣是，需要用到該事件方法再去調用，否則應該避免冗余事件的執行。
就像prevnetDefault完成它該有的工作，并不會阻止父節點繼續處理事件，使得代碼更加靈活，更易于維護。

日常開發中還是要慎用“return false”，除非你同時需要preventDefault和stopPropagation，并且確定你的回調函數執行完成后調用，那么你可以使用“return false”，否則還是用preventDefault 或 stopPropagation 更好些。

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。

參考文章：《preventDefault()、stopPropagation()、return false 之間的區別》

云服務器 GPU云服務器 php的return javascript的return stopPropagation preventDefault

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85129.html

白話解釋 Javascript事件preventDefault,stopPropagation及re

摘要：如圖使用事件捕獲模式注冊事件監聽對最外層，中間層，最內層分別用捕獲模式注冊事件監聽，我們上面說了，如果使用捕獲模式，那么第三個參數應該是，否則則是冒泡模式，如果不聲明，默認為冒泡模式。來源: 個人博客想必好多童鞋都有直接復制粘貼event.preventDefault() 或者event.stopPropagation() 的經歷，但是為什么這樣做不甚了解，今天我們的目的就是要徹...

chanjarster 2019-08-21 15:09 評論0 收藏0
DOM中的各種區別小節

摘要：歡迎光臨小弟博客我的博客原文中的各種區別小節參考普通添加事件和事件綁定的事件監聽與捕獲和冒泡和的區別相信大家在DOM的實際開發與學習過程中，肯定也遇到不少需要比較的東西，這里我主要列比較以下幾點，更多的區別和總結，希望想到和遇到的朋友給我留言哦。 clientHeight/scrollHeight/offsetHeight defer vs async 事件模型-捕獲/目標/冒泡...

Guakin_Huang 2019-08-22 10:56 評論0 收藏0
preventDefault()、stopPropagation()、return false 之間

摘要：取消默認操作，如標簽的，時會觸發，有時需要取消默認操作。停止冒泡，的事件流和的事件流類似。是頂層元素分發，底層元素，由頂層往上事件傳遞，叫冒泡。停止冒泡用等同于參考文章之間的區別 1. preventDefault 取消默認操作，如a標簽的href，click時會觸發，有時需要取消默認操作。 2. stopPropagation 停止冒泡，dom的事件流和android的事件流類似。a...

warmcheng 2019-08-20 19:03 評論0 收藏0
屏幕坐標、客戶區域（可視窗口）坐標、頁面坐標的區分

摘要：區分三類坐標屏幕坐標可視窗口坐標頁面坐標有時不能迅速的對應起來，為了更好的區分三者，特意畫了一張圖如下屏幕坐標顧名思義，即整個電腦屏幕上任意一點的位置坐標，對應的屬性分別為，范圍如上圖最外層紅色邊框范圍，坐標為藍色虛線對應的坐標。區分三類坐標屏幕坐標、可視窗口坐標、頁面坐標有時不能迅速的對應起來，為了更好的區分三者，特意畫了一張圖如下： showImg(https://segme...

HmyBmny 2019-08-23 15:17 評論0 收藏0
JS高級程序設計筆記——事件（一）

摘要：但是通過添加的匿名函數無法移除，最好是在其他地方定義事件處理程序的函數，然后將該函數的名稱傳給第二個參數。一中的事件對象對象兼容級和級的瀏覽器將對象傳入到事件處理程序中。一、事件流假設有如下HTML代碼： Event Click me 其DOM樹如下圖所示：showImg(https://segmentfault.com/img/bVUUWA?w=50...

guqiu 2019-08-22 11:06 評論0 收藏0