如何创建一个在点击后能够跳转到 URL 的 HTML 取消按钮

在前端开发中，我们常常需要创建各种按钮来进行用户交互。其中，创建一个取消按钮是一个非常常见的需求。本文将介绍如何创建一个 HTML 取消按钮，并在点击后跳转到指定的 URL。

创建一个基本的取消按钮

首先，我们需要创建一个基本的取消按钮。通常情况下，取消按钮显示为一个带有“Cancel”文本的按钮。

<button>Cancel</button>

这个按钮并没有任何实际的功能，只是一个普通的按钮。

给取消按钮添加跳转功能

为了让取消按钮能够跳转到指定的 URL，我们需要使用 JavaScript 来为按钮添加事件监听器，并在按钮被点击时进行跳转操作。

<button onclick="location.href='http://www.example.com'">Cancel</button>

在这个示例代码中，我们使用了 onclick 属性来为按钮添加一个点击监听器。当按钮被点击时，JavaScript 代码将会执行，并将浏览器的 URL 设置为指定的 URL（例如 http://www.example.com）。

将 JavaScript 代码分离到外部文件中

虽然上面的代码可以实现我们所需的功能，但是它不太方便维护。因此，我们可以将 JavaScript 代码从 HTML 文件中分离出来，放到一个单独的 .js 文件中。

<button id="cancel-btn">Cancel</button>
<script src="cancel-button.js"></script>

在这个示例代码中，我们给取消按钮添加了一个 id 属性，用于在 JavaScript 中定位这个按钮。然后，我们使用 <script> 标签来引入 cancel-button.js 文件，该文件包含了实现跳转功能的 JavaScript 代码。

在 cancel-button.js 文件中，我们可以为取消按钮添加事件监听器，并在点击时进行跳转操作。

const cancelButton = document.getElementById('cancel-btn');
cancelButton.addEventListener('click', function() {
    location.href = 'http://www.example.com';
});

结论

本文介绍了如何创建一个 HTML 取消按钮，并在点击后跳转到指定的 URL。虽然这个功能非常简单，但它是前端开发中非常常见的需求之一。通过学习本文所介绍的知识，你可以更好地理解如何使用 HTML 和 JavaScript 来创建各种交互式组件，从而提升你的前端开发技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30937