在 JavaScript 中取消事件
Mehvish Ashiq
2023年1月30日
2022年5月5日
- JavaScript 中取消事件的各種方法
-
使用
event.preventDefault()
取消 JavaScript 中的事件 -
使用
event.stopPropagation()
取消 JavaScript 中的事件 -
使用
return false
取消 JavaScript 中的事件
本教程介紹了在 JavaScript 中取消事件的不同方法。它還解釋了我們如何通過示例程式碼防止冒泡到父元素。
JavaScript 中取消事件的各種方法
我們將瞭解各種 JavaScript 取消事件,下面列出了這些方法。
- 使用
event.preventDefault()
取消 JavaScript 中的事件。 - 使用
event.stopPropagation()
取消 JavaScript 中的事件。 - 使用
return false
取消 JavaScript 中的事件。
讓我們通過示例程式碼來學習它們中的每一個。
使用 event.preventDefault()
取消 JavaScript 中的事件
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using preventDefault() Method
</title>
</head>
<body>
<p>The preventDefault() method prevents the link above from
switching to the desired URL.</p>
<a id="anchor" href="https://www.google.com/">Go to Google.com</a>
</body>
</html>
JavaScript 程式碼:
document.getElementById("anchor").addEventListener("click", function(e){
e.preventDefault();
});
輸出:
cancelable
事件被 preventDefault();
阻止上面示例程式碼中的方法。這裡,cancelable
表示不會發生屬於該事件的預設動作。
preventDefault();
對於防止表單提交和重定向到所需 URL 的連結也很有用。
請記住,並非每個事件都需要可取消。我們可以使用 cancelable
屬性來檢查事件是否是可取消的。
然而,preventDefault();
不妨礙進一步傳播。我們可以使用下面給出的 stopPropagation()
方法。
使用 event.stopPropagation()
取消 JavaScript 中的事件
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using stopPropagation()
</title>
</head>
<body>
<h1>Cancel Event Using stopPropagation() Method</h1>
<p>Click DIV 1:</p>
<div onclick="funcDiv2()">DIV 2
<div onclick="funcDiv1(event)">DIV 1</div>
</div>
Check to Stop Propagation:
<input type="checkbox" id="check">
</body>
</html>
CSS 程式碼:
div {
padding: 30px;
background-color: rgba(25, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
JavaScript 程式碼:
function funcDiv1(e) {
alert("You Clicked DIV 1");
if (document.getElementById("check").checked) {
e.stopPropagation();
}
}
function funcDiv2() {
alert("You Clicked DIV 2");
}
輸出:
在本例中,DIV 1
位於 DIV 2
內。這就是為什麼如果我們點選 DIV 1
而不選中核取方塊,兩個 DIV
都會被點選。
為了避免這個問題,我們可以使用 stopPropagation()
方法來防止執行或呼叫同一事件的傳播(向下捕獲到子元素或向上冒泡到父元素)。
使用 return false
取消 JavaScript 中的事件
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using return false Method
</title>
</head>
<body>
<a href="#" onclick="returnFalseFunc();">Go to Google</a>
</body>
</html>
JavaScript 程式碼:
function returnFalseFunc(){
console.log("It returns false without redirecting to the desired location");
return false;
location.href = "http://www.google.com/";
}
輸出:
在這裡,我們使用 return false
完全停止函式的執行過程。我們使用 return false
,我們希望函式在嚴格模式下停止執行並且不再處理它。
Author: Mehvish Ashiq