Javascript 如何使元素在整个href卡中不作为href工作

所以我有这张卡，它作为一个完整的链接，但在里面，我在一个span标签下有一个图标，我不希望它作为卡的链接，而只是像一个图标一样工作，如果我不制作整个卡片href，我可以解决这个问题，但是我必须手动将卡片中的所有必需元素转换为href，我觉得这不是很有效和整洁。那么，我该怎么做呢

.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 %}

.card{
宽度：250px；
身高：350；
边界半径：10px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
背景色：白色；
左边距：30px；
右边距：30px；
边缘顶部：30px；
边缘底部：30px；
光标：指针；
}
.顶{
显示器：flex；
证明内容：之间的空间；
}
.年{
垫面：5px；
左侧填充：5px；
字体系列：圆形Std书；
}
.span书签{
左侧填充：5px；
光标：指针；
}
{%m在mlist%}
{%endfor%}

确保在卡和图标分区上都设置了位置。然后在css中为图标设置高于卡的z索引。然后，如果您将图标指定为可单击，则当您单击图标时，它不会单击卡链接。您可以使用z索引来排列卡中的所有层

您可以使用preventDefault停止导航，并使用StopperPagation停止冒泡到链接

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

函数showtuff（事件）{
//停止默认操作，例如跟踪链接
event.preventDefault（）；
//停止单击以避免冒泡，例如链接父级
event.stopPropagation（）；
//仅出于演示目的，在不再需要时删除
console.log（'从'+event.target.tagName'单击+
“达到”+事件.currentTarget.tagName）；
}
window.onload=函数（）{
//此侦听器仅用于演示，防止跟随链接
//如果你想在img之外点击链接，不要添加它
让link=document.querySelector（'a'）；
link.addEventListener（'click'，showtuff，false）；
//此侦听器停止从img到A的单击，并
//通过单击img停止导航
设img=document.querySelector（'img'）；
img.addEventListener（'click'，showtuff，false）；
}

.card{
宽度：250px；
身高：350；
边界半径：10px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
背景色：白色；
利润率：30像素；
光标：指针；
边框：1px纯绿色；
}
.中{
利润率：20px；
边框：1px纯蓝色；
}
img{
高度：50px；
宽度：50px；
利润率：20px；
边框：1px纯红；
游标：默认值；
}

这是一个很好的gd想法，但IDK为什么不起作用@bjastski你能提供一些与整个卡相关的css吗，这样我就可以重新创建并可能找到问题？当然，等一分钟，他们Zeniel，仔细看后，我想你必须将其从“a”标记中删除。如果你把它放在“a”标签外面，但仍然在你的卡片div里面，你可以给卡片它的相对位置，然后给书签一个绝对位置，然后给书签一个类似“right:10px，top:0px”的东西“在你的css中，与z-index一起使用可以确保它不会在卡片上点击卡片链接。最好使用js，我想处理这种情况，但你的想法也不错，所以Imma会给你一个向上投票和thnx的帮助。它不适用于db中的所有卡片不知道为什么更新的示例更像OP。定义“不工作”。在图像上单击不会在元素上产生气泡。为了演示，对链接的点击也会被阻止，因此如果你想跟随链接，请删除该侦听器。我有很多卡片，它只对一张有效，我使用了跨度的概念，发生的情况是，链接停止（根据需要），但图标也不起作用，但它只是对第一张卡片有效