vue不阻止事件冒泡?JS阻止事件冒泡及阻止默認事件解決方案：，我來為大家講解一下關于vue不阻止事件冒泡?跟着小編一起來看一看吧!
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 myTextbox
myTextbox.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();
}
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
