JS阻止事件冒泡及阻止默认事件解决方案：
1、event.preventDefault —— 阻止默认
Event接口的preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation()或stopImmediatePropagation()，才停止传播。
示例：
<!DOCTYPE html><html><head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style></head><body><form><label for="id-checkbox">Checkbox:</label><input type="checkbox" id="id-checkbox"/></form><div id="output-box"></div><script>document.querySelector("#id-checkbox").addEventListener("click", function(event) {document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";event.preventDefault();}, false);</script></body></html>
<!DOCTYPE html><html><head><style>.warning {border: 2px solid #f39389;border-radius: 2px;padding: 10px;position: absolute;background-color: #fbd8d4;color: #3b3c40;}</style></head><body><div class="container"><form><input type="text" id="my-textbox"></form></div><script>var myTextbox = document.getElementById('my-textbox');myTextbox.addEventListener('keypress', checkName, false);function checkName(evt) {var charCode = evt.charCode;if (charCode != 0) {if (charCode < 97 || charCode > 122) {evt.preventDefault();displayWarning("Please use lowercase letters only."+ "\n" + "charCode: " + charCode + "\n");}}}var warningTimeout;var warningBox = document.createElement("div");warningBox.className = "warning";function displayWarning(msg) {warningBox.innerHTML = msg;if (document.body.contains(warningBox)) {window.clearTimeout(warningTimeout);} else {// insert warningBox after myTextboxmyTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);}warningTimeout = window.setTimeout(function() {warningBox.parentNode.removeChild(warningBox);warningTimeout = -1;}, 2000);}</script></body></html>
2、event.stopImmediatePropagation —— 下阻止冒泡
Event接口的stopImmediatePropagation()方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行stopImmediatePropagation()，那么剩下的事件监听器都不会被调用。
示例：
<!DOCTYPE html><html><head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style></head><body><div><p>paragraph</p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')p.addEventListener("click", (event) => {alert("div");}, false);p.addEventListener("click", (event) => {alert("p");}, false);p.addEventListener("click", (event) => {alert("p1");event.stopImmediatePropagation();// 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.}, false);p.addEventListener("click",(event) => {alert("p2");// 该监听函数排在上个函数后面，该函数不会被执行}, false);document.querySelector("div").addEventListener("click", (event) => {alert("p3,我是p元素的上层元素");// p元素的click事件没有向上冒泡，该函数不会被执行}, false);</script></body></html>
3、event.stopPropagation —— 上阻止冒泡
阻止捕获和冒泡阶段中当前事件的进一步传播。
但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。
如果要停止这些行为，请参见preventDefault方法，它可以阻止事件触发后默认动作的发生。
示例：
<!DOCTYPE html><html><head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style></head><body><div><p>paragraph</p></div><script>const div = document.querySelector('div');const p = document.querySelector('p');div.addEventListener("click", (event) => {alert("div");}, false);p.addEventListener("click", (event) => {event. stopPropagation();alert("p");}, false);</script></body></html>
4、return false —— 这是个蛋蛋？
示例：默认的JS只会触发preventDefault()，因此只有在JQ中return false相当于同时执行了event.stopPropagation()和event.preventDefault()。
<!DOCTYPE html><html><head><style>p { height: 30px; width: 150px; background-color: #ccf; }div {height: 30px; width: 100%; background-color: #cfc; }</style></head><body><div onclick="clickDiv()"><p onclick="clickP()">paragraph</p></div><script>function clickDiv() {alert("div");}function clickP() {alert("p");return false;}</script></body></html>
Vue阻止事件冒泡解决方案：
<div @click="clickDiv"><button @click="clickButton"></button></div>clickDiv = () => {alert("div");},clickButton = (event) => {alert("button");event.stopPropagation();},或者：<div @click="clickDiv"><button @click.stop="clickButton"></button></div>clickDiv = () => {alert("div");},clickButton = (event) => {alert("button");},// 也可以同时串联其他修饰，比如：@click.stop.prevent=”clickHere“
React阻止事件冒泡解决方案：
<div onClick={clickDiv}><button onClick={clickButton}></button></div>const clickDiv = () => {alert("div");}const clickButton = (event) => {alert("button");event.stopPropagation();}
