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

Question

所以我有这张卡片，可以作为整个链接使用，但在其中，我在 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 %}

Answer 1

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

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

function showStuff(event) {
  // Stop default action, e.g. following a link
  event.preventDefault();
  // Stop click from bubbling, e.g. 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>

Answer 2

确保您在卡片和图标 div 上都设置了位置。然后为你的css中高于卡片的图标设置一个z-index。然后，如果您将图标指定为可点击，则在您点击图标时它不会点击卡片链接。您可以使用 z-index 排列卡片中的所有图层。