在 <a> 标记中禁用 href

Disable href in a <a> tag

本文关键字：href      更新时间：2023-09-26

我正在开发一个js插件，人们可以将其嵌入到他们的网站/wordpress上。js 使用 ajax 加载并修改 DOM 中的一些标签(使用特定类(。该插件修改这些标签以嵌入带有来自 API 的自定义图钉的谷歌地图。

我想使用 href 来链接 API URL 和插件。但是，使用此 href 意味着单击地图会重定向到我想要的 api。我可以使用e.preventDefault()但它禁用了内部谷歌地图链接(图钉是指向该地点详细页面的链接，这些链接是从 API 加载的(。

所以我想要的是简单地禁用插件容器 href，而不禁用子链接。下面是一个示例：

<a href="link-to-the-api" class="my-plugin-class disable-me">
    <div class="google-map">
        <a href="link-to-place1" class="dont-disable-me">place 1</a>
        <a href="link-to-place2" class="dont-disable-me">place 2</a>
        <a href="link-to-place3" class="dont-disable-me">place 3</a>
    </div>
</a>
<script src="http://my-custom-map.com"></script>

编辑：我忘了提到我想使用和href来改善API的SEO。

谢谢！

正如 DanFromGermany 所指出的，你不能嵌套<a>元素。

相反，为什么不使用div？由于您似乎正在通过onclick处理对它的点击，因此您可以使用div就可以了。然后，您可以检查e.target || e.srcElement以查看点击是否确实在其中一个链接上。如果是，请允许事件通过。否则，请使用 API 进行处理。

最好使用 data-* 属性(如 data-api="link-to-the-api" (并访问该属性。

您可以使用

onclick="return false;"来防止更改页面。

另外，您应该知道不允许在<a>中使用<a>标签。

相关文章：