javascript - 如何将 anchor 标记内的 span 元素设置为非 anchor 元素？

Question

我有一个 anchor 标记和一个跨度以及嵌入 anchor 标记中的 i 元素 -

<a href="home.html" class="list-group-item" data-toggle="collapse"
    aria-expanded="false" style="padding-left: 30px;" id="id1">
  <span
          id="id2" class="glyphicon glyphicon-eye-close"
          style="color: #d6d6d6 !important; font-size: 15px;" title="title1">
  </span> 
  <i class="glyphicon glyphicon-folder-close"></i>
  HOME 
</a>

当我单击 i 元素或 span 元素时，页面会按照我想要的方式重定向到 home.html。

但是当我单击 span 元素时，我不想将页面重定向到 home.html。相反，我想将 span 元素与单击事件的不同操作绑定(bind)。我知道一个快速解决方法是将跨度放在 anchor 标记之外，但不幸的是，我不得不按照我的要求这样做。有什么办法可以解决这个问题吗？

任何帮助将不胜感激。提前致谢。

Answer 1

您可以取消子元素的事件以防止其冒泡到父元素。

只需从点击事件返回 false 即可。

<a href="home.html">
  <span onclick="return clickme();"> 
          CLICK ME
  </span> 
  <i class="glyphicon glyphicon-folder-close"></i>
  HOME 
</a>

jsfiddle: https://jsfiddle.net/ksLbrj8y/3/

请注意，取消事件本身就会引起争议；有关各种技术，请参阅此线程。

How to stop event propagation with inline onclick attribute?