preventDefault,stopPropagation,return false三者的區別

時間 2019-12-04

標籤 preventdefault stoppropagation return false 區別简体版

原文原文鏈接

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

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

這三者的使用想必你們並不陌生，可是細想之下仍是有可究之處。面試

preventDefault()

阻止元素在瀏覽器中的默認行爲編程

<a id="link" href="http://wuliv.com">網站</a>
$('#link').click(function(event){
    event.preventDefault(); // 阻止了a連接href的訪問或跳轉
})

stopPropagation()

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

事件捕獲：父級元素先觸發，子級元素後觸發，在此僅作了解。函數

<body>
  <div id="inner">
    <p>事件冒泡例子</p>
    <button id="btn">我要彈個框</button>
  </div>
</div>

$('#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中一個對象能夠綁定多個事件方法，執行順序會按照綁定的前後順序來執行網站

<body>
    <div id="inner">
        <p>stopImmediatePropagation()例子</p>
        <button id="btn">按鈕</btn>
    </div>
</body>

$('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」作的事情不單單只是阻止默認行爲code

當調用「return false」時，它執行了如下三件事情htm

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 更好些。