在前端开发中，我们常常需要创建各种按钮来进行用户交互。其中，创建一个取消按钮是一个非常常见的需求。本文将介绍如何创建一个 HTML 取消按钮，并在点击后跳转到指定的 URL。
创建一个基本的取消按钮
首先，我们需要创建一个基本的取消按钮。通常情况下，取消按钮显示为一个带有“Cancel”文本的按钮。
-----------------------
这个按钮并没有任何实际的功能，只是一个普通的按钮。
给取消按钮添加跳转功能
为了让取消按钮能够跳转到指定的 URL，我们需要使用 JavaScript 来为按钮添加事件监听器，并在按钮被点击时进行跳转操作。
------- ----------------------------------------------------------------
在这个示例代码中，我们使用了 onclick 属性来为按钮添加一个点击监听器。当按钮被点击时，JavaScript 代码将会执行，并将浏览器的 URL 设置为指定的 URL（例如 http://www.example.com）。
将 JavaScript 代码分离到外部文件中
虽然上面的代码可以实现我们所需的功能，但是它不太方便维护。因此，我们可以将 JavaScript 代码从 HTML 文件中分离出来，放到一个单独的 .js 文件中。
------- ------------------------------- ------- --------------------------------
在这个示例代码中，我们给取消按钮添加了一个 id 属性，用于在 JavaScript 中定位这个按钮。然后，我们使用 <script> 标签来引入 cancel-button.js 文件，该文件包含了实现跳转功能的 JavaScript 代码。
在 cancel-button.js 文件中，我们可以为取消按钮添加事件监听器，并在点击时进行跳转操作。
----- ------------ - --------------------------------------
-------------------------------------- ---------- -
------------- - -------------------------
---结论
本文介绍了如何创建一个 HTML 取消按钮，并在点击后跳转到指定的 URL。虽然这个功能非常简单，但它是前端开发中非常常见的需求之一。通过学习本文所介绍的知识，你可以更好地理解如何使用 HTML 和 JavaScript 来创建各种交互式组件，从而提升你的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30937