how do I make an element not work as href in an entire href card

Question

So I have this card that works as an entire link but inside that, I have an icon under a span tag and I don't want it to work as the card's link rather just act like an icon, Ik I can solve this if I don't make the entire card href but then I'd have to manually turn all the required elements present inside the card into href which I feel like isn't efficient and neat. So any suggestions on how do I go from here?

.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

Make sure you have a position set on both the card and the icon div. Then set a z-index for the icon that is higher than the card in your css. Then if you assign the icon to be clickable, it won't click the card link when you click the icon. You can use z-index to arrange all the layers in your card.

Answer 2

You can stop navigation with preventDefault and stop bubbling up to the link with stopPropagation .

In the following demo, clicking on the img doesn't bubble up the DOM. Clicking on the div outside the img bubbles up to the A, as does clicking on the A text.

 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>