event.stopPropagation和event.preventDefault有什么区别？
他们似乎在做同样的事情……是现代的还是老的？ 还是不同的浏览器支持它们？
当我自己处理事件（没有框架）时，我总是检查两者并执行（如果存在）。 （我也return false ，但是我感觉不适用于与node.addEventListener事件）。
那么为什么两者都呢？ 我应该继续检查两者吗？ 还是实际上有区别？
（我知道，很多问题，但都是相同的=）
#1楼
这是这里的报价
Event.preventDefault
preventDefault方法可防止事件执行其默认功能。 例如，您可以在A元素上使用preventDefault来停止单击该元素以退出当前页面：
//clicking the link will *not* allow the user to leave the page
myChildElement.onclick = function(e) {
e.preventDefault();
console.log('brick me!');
};
//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) {
console.log('you bricked my child!');
};
虽然元素的默认功能是固定的，但事件继续使DOM冒泡。
Event.stopPropagation
第二种方法stopPropagation允许事件的默认功能发生，但阻止事件传播：
//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) {
e.stopPropagation();
console.log('prop stop! no bubbles!');
};
//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) {
console.log('you will never see this message!');
};
stopPropagation有效地阻止父元素知道其子元素上的给定事件。
虽然简单的停止方法可以使我们快速处理事件，但考虑到冒泡到底要发生什么，这一点很重要。 我敢打赌，开发人员真正想要的只是90％的时间是preventDefault！ 错误地“停止”事件可能会导致大量麻烦。 您的插件可能无法正常工作，并且第三方插件可能会变砖。 更糟糕的是，您的代码破坏了网站上的其他功能。
#2楼
术语
来自quirksmode.org ：
事件捕捉
使用事件捕获时
\n | |\n --------------- | | -----------------\n | element1 | | |\n | ----------- | | ----------- |\n | | element2 \\ / | |\n | ------------------------- |\n | 活动捕获|\n -----------------------------------\nelement1的事件处理程序首先触发，element2的事件处理程序最后触发。
事件冒泡
使用事件冒泡时
\n / \\\n --------------- | | -----------------\n | element1 | | |\n | ----------- | | ----------- |\n | | element2 | | | |\n | ------------------------- |\n | 活动起泡|\n -----------------------------------\nelement2的事件处理程序首先触发，element1的事件处理程序最后触发。
W3C事件模型中发生的任何事件都首先被捕获，直到到达目标元素，然后再次冒泡 。
\n | | / \\\n ----------------- | |-| | -----------------\n | element1 | | | | |\n | ------------- | |-| | ----------- |\n | | element2 \\ / | | | |\n | -------------------------------- |\n | W3C事件模型|\n ------------------------------------------\n
接口
从w3.org进行事件捕获 ：
如果捕获的
EventListener希望阻止事件的进一步处理，则可以调用Event接口的stopPropagation方法。 这将阻止事件的进一步分发，尽管在相同层次结构级别注册的其他EventListeners仍将接收该事件。 一旦调用了事件的stopPropagation方法，对该方法的进一步调用将不会产生任何其他效果。 如果不存在其他捕获stopPropagation并且尚未调用stopPropagation，则事件将在目标本身上触发适当的EventListeners。
对于事件冒泡 ：
任何事件处理程序都可以选择通过调用
Event接口的stopPropagation方法来防止进一步的事件传播。 如果任何EventListener调用此方法，则将触发当前EventTarget上的所有其他EventListeners，但气泡将在该级别停止。 只需调用一次stopPropagation即可防止进一步起泡。
对于事件取消 ：
取消是通过调用
Event的preventDefault方法来完成的。 如果一个或多个EventListeners在事件流的任何阶段调用preventDefault，则默认操作将被取消。
例子
在以下示例中，单击Web浏览器中的超链接将触发事件的流程（执行事件监听器）和事件目标的默认操作（打开新选项卡）。
HTML：
JavaScript：
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture
";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture
";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling
";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling
";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
示例1 ：它导致输出
DIV event capture
A event capture
A event bubbling
DIV event bubbling
示例2 ：向函数添加stopPropagation()
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture
";
ev.stopPropagation();
}
结果输出
DIV event capture
事件侦听器阻止了事件的进一步向下和向上传播。 但是，这并没有阻止默认操作（打开新标签页）。
示例3 ：向函数添加stopPropagation()
function capturingOnClick2(ev) {
el.innerHTML += "A event capture
";
ev.stopPropagation();
}
或功能
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling
";
ev.stopPropagation();
}
结果输出
DIV event capture
A event capture
A event bubbling
这是因为两个事件侦听器都注册在同一事件目标上。 事件侦听器阻止了事件的进一步向上传播。 但是，它们并没有阻止默认操作（打开新标签页）。
示例4 ：例如，将preventDefault()添加到任何函数
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture
";
ev.preventDefault();
}
阻止打开新标签页。
#3楼
event.preventDefault(); 停止发生元素的默认操作。
event.stopPropagation(); 防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。
例如，如果在DIV或FORM内有一个链接了click方法的链接，并且该链接还附加了click方法，则它将阻止触发DIV或FORM click方法。
#4楼
返回false；
return false; 调用它时会做3件事：
-
event.preventDefault()–停止浏览器的默认行为。 -
event.stopPropagation()–防止事件传播（或“冒泡”）DOM。 - 停止回调执行，并在调用后立即返回。
请注意，此行为不同于正常的（非jQuery）事件处理程序，在事件处理程序中，值得注意的是， return false不会阻止事件冒泡。
preventDefault（）;
preventDefault(); 做一件事：它停止了浏览器的默认行为。
什么时候使用它们？
我们知道它们在做什么，但是什么时候使用它们呢？ 简单地说，这取决于您要完成什么。 使用preventDefault(); 如果您想“只是”阻止默认的浏览器行为。 使用return false; 当您要防止默认浏览器行为并防止事件传播DOM时。 在大多数情况下，您将使用return false; 您真正想要的是preventDefault() 。
例子：
让我们尝试通过示例来理解：
我们将看到纯JAVASCRIPT的示例
范例1：
运行上面的代码，现在如果您单击该链接，将立即看到超链接“单击此处访问stackoverflow.com” ，您将获得javascript警报链接单击，然后您将获得javascript警报div单击 ，立即将您重定向到stackoverflow.com。
范例2：
运行上面的代码，现在如果您单击该链接，将立即看到超链接“单击此处访问stackoverflow.com”，您将获得javascript警报链接单击，然后您将获得javascript警报div，单击下一步，您将看到超链接“单击此处访问stackoverflow.com，并替换为“阻止单击事件”文本，您将不会重定向到stackoverflow.com。 这是由于> event.preventDefault（）方法所致，我们使用该方法来防止触发默认的点击操作。
范例3：
这次，如果单击“链接”，将不会调用函数executeParent（），并且不会获得javascript div这次单击的警告。 这是由于我们使用event.stopPropagation（）方法阻止了向父div的传播。 接下来，您将看到超链接“单击此处访问stackoverflow.com”，并替换为文本“将要执行Click事件”，然后您将立即重定向到stackoverflow.com。 这是因为我们没有使用event.preventDefault（）方法阻止默认的点击操作触发这次。
范例4：
如果单击链接，则不会调用函数executeParent（），并且不会收到JavaScript警报。 这是由于我们使用event.stopPropagation（）方法阻止了向父div的传播。 接下来，您将看到超链接“单击此处访问stackoverflow.com”，并替换为文本“禁止单击事件”，并且您将不会重定向到stackoverflow.com。 这是因为我们已经使用event.preventDefault（）方法阻止了默认的点击操作触发这次。
范例5：
对于return false，我有三个示例，并且它们似乎都在做完全相同的事情（只是返回false），但实际上结果却大不相同。 这是上述每种情况中实际发生的情况。
情况：
- 从内联事件处理程序返回false会阻止浏览器导航到链接地址，但不会阻止事件通过DOM传播。
- 从jQuery事件处理程序返回false会阻止浏览器导航到链接地址，并且会阻止事件通过DOM传播。
- 从常规DOM事件处理程序返回false绝对不会执行任何操作。
将看到所有三个示例。
- 内联返回false。
- 从jQuery事件处理程序返回false 。
- 从常规DOM事件处理程序返回false。
希望这些例子很清楚。 尝试在html文件中执行所有这些示例，以查看它们如何工作。
#5楼
$("#but").click(function(event){ console.log("hello"); event.preventDefault(); }); $("#foo").click(function(){ alert("parent click event fired !"); });
#6楼
Event.preventDefault-停止浏览器默认行为。 现在是什么是浏览器默认行为。 假设您有一个定位标记，并且具有href属性，并且该定位标记嵌套在具有click事件的div标记内。 锚标记的默认行为是在锚标记上单击时应导航，但event.preventDefault所做的是在这种情况下它将停止导航。 但是它永远不会阻止事件的冒泡或事件的升级，即
$('.container').on('click', function(e) {
console.log('container was clicked');
});
$('.element').on('click', function(e) {
e.preventDefault(); // Now link won't go anywhere
console.log('element was clicked');
});
结果将是
“元素被点击”
“单击了容器”
现在event.StopPropation它停止事件冒泡或事件升级。 现在上面的例子
$('.container').on('click', function(e) {
console.log('container was clicked');
});
$('.element').on('click', function(e) {
e.preventDefault(); // Now link won't go anywhere
e.stopPropagation(); // Now the event won't bubble up
console.log('element was clicked');
});
结果将是
“元素被点击”
有关更多信息，请参阅此链接https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/
#7楼
stopPropagation阻止事件冒泡事件链。
preventDefault防止浏览器对该事件执行默认操作。
例子
preventDefault
$("#but").click(function (event) { event.preventDefault() }) $("#foo").click(function () { alert("parent click event fired!") })
停止传播
$("#but").click(function (event) { event.stopPropagation() }) $("#foo").click(function () { alert("parent click event fired!") })
使用stopPropagation ，仅调用button的单击处理程序 ，而div的单击处理程序从不触发。
就好像您使用了preventDefault ，只有浏览器的默认操作停止了，而div的单击处理程序仍然会触发。
以下是有关MDN的DOM事件属性和方法的一些文档：
-
event.cancelBubble -
event.preventDefault() -
event.returnValue -
event.stopPropagation()
对于IE9和FF，您可以仅使用preventDefault和stopPropagation。
为了支持IE8和更低版本，将stopPropagation替换为cancelBubble ，将preventDefault替换为returnValue