如何使元素在整個 href 卡中不能用作 href

Question

所以我有這張卡片可以作為一個完整的鏈接工作，但在其中，我在 span 標簽下有一個圖標，我不希望它作為卡片的鏈接工作，而只是像一個圖標一樣，我可以解決這個問題，如果我不要制作整個卡片的href，但是我必須手動將卡片中存在的所有必需元素轉換為href，我覺得這既不高效也不整潔。 那么關於我如何從這里 go 有什么建議嗎？

.card {
  width: 250px;
  height: 350;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color: white;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
  cursor: pointer;
}

.top {
  display: flex;
  justify-content: space-between;

}

.year {
  padding-top: 5px;
  padding-left: 5px;
  font-family: Circular Std Book;

}

.span-bookmark {
  padding-left: 5px;
  cursor: pointer;

}



{% for m in mlist %}
    <div class="card">
        <a href="http://www.google.com/search?q={{m.Name}}" target="_blank">
            <div class="top">
                <div class="year">{{m.Year}}</div>
                <span class="span-bookmark"><i class="material-icons bookmark" id="bookmark-style">bookmark</i></span>
            </div>

            <div class="middle">
                <div class="img-container"><img src="{{ m.Image.url }}"></div>
            </div>

            <div class="bottom">
                <div class="title">{{m.Name}}</div>
                <div class="target_id">{{m.targetid}}</div>
            </div>
        </a>
    </div>
{% endfor %}

Answer 1

確保在卡和圖標 div 上都設置了 position。 然后為高於 css 中的卡片的圖標設置 z-index。 然后，如果您將圖標指定為可點擊，則在您點擊圖標時它不會點擊卡片鏈接。 您可以使用 z-index 排列卡片中的所有圖層。

Answer 2

您可以使用preventDefault停止導航，並使用stopPropagation停止冒泡到鏈接。

在下面的演示中，單擊 img 不會使 DOM 冒泡。 單擊 img 外部的 div 會冒泡到 A，單擊 A 文本也是如此。

 function showStuff(event) { // Stop default action, eg following a link event.preventDefault(); // Stop click from bubbling, eg to link parent event.stopPropagation(); // Just for demonstration purposes, delete when no longer required console.log('Click from ' + event.target.tagName + ' reached ' + event.currentTarget.tagName); } window.onload = function() { // This listener is for demo only and prevents following the link // Don't add it if you want to follow the link for clicks outside the img let link = document.querySelector('a'); link.addEventListener('click', showStuff, false); // This listener stops clicks from the img reaching the A and // stops navigation from clicks on the img let img = document.querySelector('img'); img.addEventListener('click', showStuff, false); }

 .card { width: 250px; height: 350; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); background-color: white; margin: 30px; cursor: pointer; border: 1px solid green; }.middle { margin: 20px; border: 1px solid blue; } img { height: 50px; width: 50px; margin: 20px; border: 1px solid red; cursor: default; }

 <div class="card"> <a href="http://www.google.com/search?q={{m.Name}}" target="_blank">Some link text <div class="middle"> <div class="img-container"><img src="foo.jpg"></div> </div> Some more link text </a> </div>