如何向已经具有 href 的标签添加第二次点击事件？

Question

我需要向 link 添加第二个点击事件。我想添加一个模态事件，如 this codepen 中所示 - 但它已经使用 HREF 进行下载 link。处理此问题的最佳方法是什么？

<a download href="/path-to-file"><strong>DOWNLOAD</strong></a>

说清楚。我需要 link 文件保持原样，但也会触发弹出窗口。

Answer 1

<a> 元素可以在其到达其 href（目标）的途中触发功能。它有一个内置的 HTML 属性（全局事件处理程序，具体而言），称为 onclick，这在大多数 HTML 内容元素中很常见。

onclick 处理程序将首先执行。它需要一个属性（名为 event），即 PointerEvent.

所以这会起作用：

<script lang="javascript">
  function doSomething(e) {
    console.log(`You clicked <${e.target.localName}>`);

    debugger;
    // Press F8 to resume execution

  }
</script>
<a download href="/path-to-file" onclick="doSomething(event)"><strong>DOWNLOAD</strong></a>

click 指针事件冒泡。这意味着一旦执行了绑定到元素的 onclick 处理程序，文档就会查找绑定到其祖先（父元素）的任何其他 onclick 处理程序。如果它找到它们，它也会按顺序（最接近的第一个）执行它们，一直到 document（其中包含 <body>，如 .body）。

这意味着您不必将 onclick 处理程序绑定到具有 href 本身的元素上。您可以将它绑定到它的任何父级上，它仍然会在文档转到 <a> 的 href:

之前执行

<script lang="javascript">
  function doSomething(e) {
    console.log(`You clicked <${e.target.localName}>`);
    // uncomment next line to stop it getting to href (and see the log above)
    // e.preventDefault();
  }
</script>
<div onclick="doSomething(event)">
  <a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
</div>

您可以在 event 上调用 .preventDefault() 来阻止它进入 href 和冒泡。
要阻止它冒泡但仍允许它进入其 href，您可以对其调用 .stopPropagation()。

注意：在我的整个回答中，我对 MDN 网络文档使用了 links。相反，我可以（有些人甚至可能会说应该）将 links 用于实际的 HTML 生活标准（a.k.a。“官方 HTML 文档” )。我选择不这样做，因为大多数人觉得标准太技术化，因此更难理解。但请注意，每个 MDN 页面在页面底部都有一个 link 指向该资源的官方文档。

如何向已经具有 href 的标签添加第二次点击事件？

How do I add a second click event to an a tag that already has an href?

html

modal-dialog

hyperlink