在 JavaScript 中取消事件

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中取消事件

作者：迹忆客最近更新：2023/03/10 浏览次数：

本教程介绍了在 JavaScript 中取消事件的不同方法。它还解释了我们如何通过示例代码防止冒泡到父元素。

我们将了解各种 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() 方法。

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() 方法来防止执行或调用同一事件的传播（向下捕获到子元素或向上冒泡到父元素）。

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/";
}