个人中心
gpt4 book ai didi

css - 使用 css 禁用父链接( anchor )

转载 作者：太空宇宙 更新时间：2023-11-04 01:46:54 25 4
gpt4 key购买 nike

我有一个 anchor 和一个带有跨度的 H1。当我单击 span 时，我会显示警报，但链接也会打开，我不想发生这种情况，我只想显示警报。有什么方法可以用 CSS 做到这一点(我不能不使用 jQuery)？也许 z-index？这是代码:

<!DOCTYPE html>
<html lang="en">

<head>
    ...
    <style>
    h1 {
        background-color: green;
    }

    span {
        font-size: 12px;
        color: white;
        margin-left: 15px;
    }
    </style>
</head>

<body>
    <a href="https://stackoverflow.com/" target="_blank">
        <h1>Title <span>Some text</span></h1>
    </a>
    <script>
    $("span").click(function() {
        alert("The span was clicked");
    });
    </script>
</body>

</html>

这里是 fiddle :https://jsfiddle.net/b820m6uj/

最佳答案

如果你不会使用 jQuery，你可以使用 vanilla javascript:

<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <style>
    h1 {
      background-color: green;
    }
    
    span {
      font-size: 12px;
      color: white;
      margin-left: 15px;
    }
  </style>
</head>

<body>
  <a href="https://stackoverflow.com/" target="_blank">
    <h1>Title <span>Some text</span></h1>
  </a>
  <script>
    document.querySelectorAll('a').forEach(function (link) {
      link.addEventListener('click', function (event) {
        event.preventDefault();
        alert("The span was clicked");
      });
    });
  </script>
</body>

</html>

关于css - 使用 css 禁用父链接( anchor )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44317626/

25 4 0
文章推荐： python - Circleci 与 gcloud sdk UnicodeDecodeError
文章推荐： c - 将整数分配给 C 位域
文章推荐： Node.js Sequelize 获取原生池
文章推荐： c - 互操作 C 库时为 "Unresolved Reference"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com