成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

bladefury / 2740人閱讀

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

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

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

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

preventDefault()

阻止元素在瀏覽器中的默認(rèn)行為

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

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

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

  

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

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

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

    

        
stopImmediatePropagation()例子

        



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

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

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

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

// 最終輸出
"#btn 1" // (因?yàn)閟topImmediatePropagation阻止了#btn綁定的剩余未執(zhí)行的事件方法，并且阻止了冒泡)

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

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

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

event.preventDefault()


event.stopPropagation()


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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85129.html

相關(guān)文章

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

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

    chanjarster 評(píng)論0 收藏0

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

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

    Guakin_Huang 評(píng)論0 收藏0

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

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

    warmcheng 評(píng)論0 收藏0

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

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

    HmyBmny 評(píng)論0 收藏0

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

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

    guqiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<