Question

我有一个锚点和一个带有跨度的H1。当我点击跨度时，我会显示一个提示，但链接也已打开，我不希望发生这种情况，我只想显示提醒。有没有办法用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>

这里的小提琴：https://jsfiddle.net/b820m6uj/

Answer 1

如果您已经在使用jQuery，请将span选择器更改为a传递event对象，并在您的块中添加event.preventDefault()。见演示1。

这是一种使用CSS的方法，但您需要在HTML中更改2件事。

向id或<span>（例如<h1> ...）

<span id='tgt'>

接下来，将<a> nchor target更改为id的{{1}}（例如<span> ...`）
最后但并非最不重要的是，将此规则集添加到您的CSS：
```
<a href="whatever.com" target='tgt'>
```

伪类是:target，如上所示，当应用时，将启用在单击#tgt:target {display:inline} nchor时分配给它的选择器上的任何规则集（当然，前面已经解释了所有准备工作）。我分配了<a>，因为display:inline已经span#tgt使inline nchor真正被禁用，几乎完全无价值但可点击。请参阅演示2. BTW在演示2中添加了第二个使用JavaScript的示例，它仍然可以正常运行。

演示1

<a>

演示2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>
    $("a").click(function(event) {
      event.preventDefault();
      alert("The span was clicked");
    });
  </script>
</body>

</html>

document.getElementById('tgt2').addEventListener('click', function(e) {
  /* Once again this would be the best solution */
  // e.preventDefault()
  alert("Hey JavaScript/jQuery works still!")
}, false);

#tgt1:target {
  display: inline
}

#tgt2:target {
  display: inline
}

Answer 2

如果你不能使用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>

Answer 3

您可以将点击处理程序附加到e.target，然后测试e.preventDefault()并查看它是否是范围，如果是，则显示警报并使用$("a").on('click', function(e) { span = $(this).find('h1 span')[0]; if (e.target == span) { e.preventDefault(); alert("The span was clicked."); } });禁用链接

＆＃13;

h1 {
  background-color: green;
}

span {
  font-size: 12px;
  color: white;
  margin-left: 15px;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
  <h1>Title <span>Some text</span></h1>
</a>

＆＃13;

{{1}}

＆＃13;

使用css

3 个答案:

演示1

演示2