原文鏈接：https://www.cnblogs.com/momo798/p/6025777.html
我的理解：preventDefault()主要是阻止自身的默認(rèn)行為挚冤，stopPropagation主要是用來(lái)阻止傳播，冒泡赞庶；return false是兩者結(jié)合训挡。
在平時(shí)項(xiàng)目中，如果遇到需要阻止瀏覽器默認(rèn)行為摊册，大家經(jīng)常會(huì)用return false;和event.preventDefault()來(lái)阻止肤京，但對(duì)它倆的區(qū)別還是有些一知半解，于是看了文檔茅特，查了些資料忘分，在此總結(jié)下它倆的區(qū)別，順便帶上event.stopPropagation()一起區(qū)分下白修。

一妒峦、原生js中：

關(guān)于return false和preventDefault：

在W3C Document Object Model Events Specification1.3版本中提到過(guò)：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">The EventListener interface is the primary method for handling events. Users implement the EventListener interface
and register their listener on an EventTarget using the AddEventListener method. The users should also remove their
EventListener from its EventTarget after they have completed using the listener.</pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">handleEvent
This method is called whenever an event occurs of the type for which the EventListener interface was registered.</pre>

同時(shí)，在1.2.4. Event Cancelation 文檔中也提到：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault
during any phase of event flow the default action will be canceled. </pre>

HTML5 Section 6.1.5.1 of the HTML Spec規(guī)范定義如下：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">Otherwise
If return value is a WebIDL boolean false value, then cancel the event.</pre>

也就是說(shuō)兵睛，事件處理程序的返回值只對(duì)通過(guò)屬性注冊(cè)的處理程序才有意義肯骇，如果我們未通過(guò)addEventListener()函數(shù)來(lái)綁定事件的話，若要禁止默認(rèn)事件卤恳，用的就是return false; 但如果要用addEventListener()或者attachEvent()來(lái)綁定累盗，就要用preventDefault()方法或者設(shè)置事件對(duì)象的returnValue屬性寒矿。

而H5規(guī)范中為什么要OtherWise來(lái)強(qiáng)調(diào)return false突琳，因?yàn)橐?guī)范中有指出在mouseover等幾種特殊事件情況下，return false;并不一定能終止事件符相。所以拆融，在實(shí)際使用中，我們需要盡量避免通過(guò)return false;的方式來(lái)取消事件的默認(rèn)行為啊终。

** 二镜豹、在jQuery中：**

這里需要先了解下事件傳遞機(jī)制：

例如鼠標(biāo)被按下后，mousedown事件被觸發(fā)蓝牲。
事件先從document->ancestor element->...->parent->event.target(在此元素上按下的鼠標(biāo))->parent->...->ancestor element->document.
事件走了一個(gè)循環(huán)趟脂，從documet到event.target再回到document，從event.target到document的過(guò)程叫做冒泡例衍。

event.stopPropagation(); // 事件停止冒泡到昔期，即不讓事件再向上傳遞到document已卸，但是此事件的默認(rèn)行為仍然被執(zhí)行，如點(diǎn)擊一個(gè)鏈接硼一，調(diào)用了event.stopPropagation()累澡，鏈接仍然會(huì)被打開(kāi)。

event.preventDefault(); // 取消了事件的默認(rèn)行為般贼，如點(diǎn)擊一個(gè)鏈接愧哟，鏈接不會(huì)被打開(kāi)，但是此事件仍然會(huì)傳遞給更上一層的先輩元素哼蛆。

在事件處理函數(shù)中使用 return false; 相當(dāng)于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()蕊梧，事件的默認(rèn)行為不會(huì)被執(zhí)行，事件也不會(huì)冒泡向上傳遞腮介。

此時(shí)在jQuery中望几，return false；就不是簡(jiǎn)單的覆蓋面和規(guī)范的問(wèn)題了萤厅。在jQuery事件處理函數(shù)中調(diào)用return false;相當(dāng)于同時(shí)調(diào)用了preventDefault和stopPropagation方法橄抹，這會(huì)導(dǎo)致當(dāng)前元素的事件無(wú)法向上冒泡，在事件代理模式下惕味，會(huì)導(dǎo)致問(wèn)題楼誓。

比如，我有一個(gè)div容器名挥，里面是 幾個(gè)a標(biāo)簽疟羹，它們的href里分別存儲(chǔ)了url地址，這個(gè)url被用來(lái)動(dòng)態(tài)的載入到下面的div#content中禀倔，這里為了簡(jiǎn)單演示榄融，就只把url字符串寫(xiě)入到div#content中：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div id="container">
<a href="/content1.html">content1</a>
<a href="/content2.html">content2</a>
<div id="content">我會(huì)根據(jù)點(diǎn)擊鏈接的url不同而改變的</div>
</div></pre>

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">// 為container下的所有a標(biāo)簽綁定click事件處理函數(shù)
("#container").click(function (e) { if (e.target.nodeName == "A") {("#content").html(e.target.href);
}
}); // 再為a標(biāo)簽綁定click事件處理函數(shù)，阻止默認(rèn)事件
$("#container a").click(function () { return false;
});</pre>

上面的代碼運(yùn)行后救湖，雖然阻止了a標(biāo)簽的點(diǎn)擊默認(rèn)行為愧杯，但同時(shí)停止了冒泡事件，導(dǎo)致其外層的父元素?zé)o法檢測(cè)到click事件鞋既，所以jQuery中需要明白return false;和event.preventDefault()二者的區(qū)別力九。

即盡量不要用return false;來(lái)阻止event的默認(rèn)行為。

附：

event.preventDefault()方法并不被ie支持邑闺，在ie下需要用window.event.returnValue = false; 來(lái)實(shí)現(xiàn)跌前。一般都是這樣寫(xiě)，代碼如下：

function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM標(biāo)準(zhǔn)的瀏覽器

} else {
window.event.returnValue = false; //IE

}
}

也可以處理ie || firefox下圖片拖動(dòng)的問(wèn)題陡舅。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">document.onmousemove=function(ev){
　　var oEvent=ev||event;
　　if(oEvent.preventDefault){oEvent.preventDefault();}
　　else{oEvent.returnValue=false;}
}</pre>