亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

bladefury / 2794人閱讀

摘要：與之順序相反的是事件捕獲?？梢岳斫鉃槭堑纳壈妫俗柚姑芭?，還能阻止結(jié)束掉當前對象未執(zhí)行的其它綁定事件方法。作者以樂之名本文原創(chuàng)，有不當?shù)牡胤綒g迎指出。參考文章之間的區(qū)別

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

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

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

preventDefault()

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

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

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

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

  

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

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

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

    

        
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綁定的剩余未執(zhí)行的事件方法，并且阻止了冒泡)

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

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

當調(diào)用“return false”時，它執(zhí)行了以下三件事情

event.preventDefault()


event.stopPropagation()


停止回調(diào)函數(shù)執(zhí)行并立即返回

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

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

// preventDefault 和 stopPropagation 并不會阻止回調(diào)函數(shù)的執(zhí)行
總結(jié)

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

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

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

作者：以樂之名
本文原創(chuàng)，有不當?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85129.html

相關(guān)文章

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

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

    chanjarster 評論0 收藏0

  • DOM中的各種區(qū)別小節(jié)

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

    Guakin_Huang 評論0 收藏0

  • preventDefault()、stopPropagation()、return false 之間

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

    warmcheng 評論0 收藏0

  • 屏幕坐標、客戶區(qū)域（可視窗口）坐標、頁面坐標的區(qū)分

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

    HmyBmny 評論0 收藏0

  • JS高級程序設(shè)計筆記——事件（一）

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

    guqiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<