在 JavaScript 中取消事件

Mehvish Ashiq 2024年2月15日
  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
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