Question

我有一个锚标签和一个span，并且在锚标签中嵌入了一个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。相反，我想为click事件使用不同的动作绑定span元素。我知道一种快速的解决方法是将跨度设置在锚定标记之外，但是不幸的是，根据我的要求，我不得不这样做。有什么办法解决吗？

任何帮助将不胜感激。预先感谢。

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?

Answer 2

您需要为此使用JavaScript。您可以将click事件监听器添加到<span>标记中。然后，在事件处理程序中，在click事件上调用.preventDefault()并重定向用户。像这样：

document.querySelector('id2').addEventListener("click", function (e) {
    e.preventDefault();
    window.location = "http://example.com";
});

请注意，这有点违反良好的语义（即，与SEO，屏幕阅读器和网站的其他非标准消费者打交道时，您的里程可能会有所不同。）

如何将定位标记内的span元素设为非定位元素？

2 个答案: