如何將定位標記內的span元素設為非定位元素？

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

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

只需從click事件中返回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/

請注意，取消活動尚需進行辯論。 有關各種技術，請參見此線程。

如何使用內聯onclick屬性停止事件傳播？

Answer 2

您需要為此使用JavaScript。 您可以將click事件偵聽器添加到<span>標記。 然后，在事件處理程序中，在click事件上調用.preventDefault()並重定向用戶。 像這樣：

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

請注意，這有點違反良好的語義（即，與SEO，屏幕閱讀器和網站的其他非標准消費者打交道時，您的工作量可能會有所不同）。