在 JavaScript 中取消事件

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. JavaScript 中取消事件的各種方法
  2. 使用 event.preventDefault() 取消 JavaScript 中的事件
  3. 使用 event.stopPropagation() 取消 JavaScript 中的事件
  4. 使用 return false 取消 JavaScript 中的事件
在 JavaScript 中取消事件

本教程介紹了在 JavaScript 中取消事件的不同方法。它還解釋了我們如何通過示例程式碼防止冒泡到父元素。

JavaScript 中取消事件的各種方法

我們將瞭解各種 JavaScript 取消事件,下面列出了這些方法。

  1. 使用 event.preventDefault() 取消 JavaScript 中的事件。
  2. 使用 event.stopPropagation() 取消 JavaScript 中的事件。
  3. 使用 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();
});

輸出:

在 javascript 中取消事件的不同方法 - 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");
}

輸出:

在 javascript 中取消事件的不同方法 - stoppropagation

在本例中,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/";
}

輸出:

在 javascript 中取消事件的不同方法-returnfalse

在這裡,我們使用 return false 完全停止函式的執行過程。我們使用 return false,我們希望函式在嚴格模式下停止執行並且不再處理它。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Event