如何使仅可单击的图像而不是整个 div？ [关闭]答案

【问题标题】：How do I make just an image clickable and not the entire div? [closed]如何使仅可单击的图像而不是整个 div？ [关闭]
【发布时间】：2016-03-02 17:29:34
【问题描述】：

如何只制作可点击的图片而不是可点击图片所在的整个 div？在这种情况下，第一个图像 .home、一个锚点和包含它的 div .nav 是可点击的。还有第二张图片没有锚点，所以没关系。如何使锚点内的第一张图片可点击，而不是包含它们的 div？

    img.home {

      display: block;

      margin-left: auto;

      margin-right: auto;

      margin-top: 25px;

      -webkit-transition-duration: 0.8s;

      -moz-transition-duration: 0.8s;

      transform-duration: 0.8s;

    }

    img.home:hover {

      -webkit-transform: rotate(360deg);

      -moz-transform: rotate(360deg);

      transform: rotate(360deg);

    }

    img.catfalogo {

      position: absolute;

      display: block;

      margin: 0 auto;

      top: 155px;

      left: 50%;

      z-index: 1;

      text-align: center;

      -webkit-transform: translate(-50%, -50%);

      transform: translate(-50%, -50%);

    }

    .nav {

      position: fixed;

      height: 212px;

      width: 100%;

      background: #C9D4E7;

      z-index: 2;

      top: 0px;

    }

<div class="nav">
  <p>Click to the right or left of the img.home and it will be clickable. I don't want that. I only want img.home (spinning shield) to be clickable.</p>
  <a href="informationindex.html">
    <img class="home" src="http://i.ebayimg.com/images/a/T2eC16ZHJHQE9nzEy9TZBQgKMjrbTw~~/s-l64.jpg" alt="home" width="67px" height="67px">
  </a>
  <img class="catfalogo" src="https://vgboxart.com/resources/logo/2250_captain-america-the-first-avenger-prev.png" alt="catfa logo" height="90px">
</div>

img 在这张图片中，较暗的区域是当前可点击的区域。我只希望圆形图像（美国队长的盾牌）可以点击。不是它周围的整个空间。

谢谢！

【问题讨论】：

当我们甚至看不到整个
或周围的代码时非常困难
如果你想让它把你链接到另一个页面，用一个链接包装它，否则我不明白你想要什么。你能更具体点吗？？
我似乎无法想象您所描述的场景。你能用油漆画一张照片，把你可以点击的区域涂成蓝色，把不可点击的区域涂成红色吗？ - 我尝试运行你的代码，只有第一张图片是可点击的，而不是整个 div。
@ColnsAbt 是的，我希望它链接到另一个页面。它这样做了，但是我只希望图像链接到另一个页面，而不是整个 div。当我将鼠标悬停在整个 div 上时，整个 div 都是可点击的。我只希望图像可点击。我更新了代码，希望能帮助您更好地理解。
您提供的代码正是这样做的，只使第一张图片可点击。现在，根据您的 css，它可能是整个 div，所以我们也需要查看您的 css。

【解决方案1】：

第一张图片是可点击的。 div 不可点击。将pointer-events: none 分配给任何元素的样式（内联、外部等），它将无法点击。默认为pointer-events: auto;

img.home {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
  pointer-events: auto;
}
img.home:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}
img.catfalogo {
  position: absolute;
  display: block;
  margin: 0 auto;
  top: 155px;
  left: 50%;
  z-index: 1;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nav {
  position: fixed;
  height: 212px;
  width: 100%;
  background: #C9D4E7;
  z-index: 2;
  top: 0px;
  pointer-events: none;
}

<div class="nav">
  <a href="informationindex.html">
    <img class="home" src="http://i.ebayimg.com/images/a/T2eC16ZHJHQE9nzEy9TZBQgKMjrbTw~~/s-l64.jpg" alt="home" width="67px" height="67px">
  </a>
  <img class="catfalogo" src="https://vgboxart.com/resources/logo/2250_captain-america-the-first-avenger-prev.png" alt="catfa logo" height="90px">
</div>

编辑：虽然原始演示足以向 OP 传达指令，但我对其进行了编辑，因为似乎某个成员正在竭尽全力掩饰这个问题。

【讨论】：

那又怎样。这是为了展示pointer-events 的能力。如果您阅读答案，它会说 >Apply pointer-events to any element.
什么意思？？然后我猜removeEventListener 不应该被你的 logic 使用
这个答案有效！非常感谢大家的帮助！
OP是如何添加事件的？她为正确的目的使用了锚，她只是不想要副作用。
@Anna 不客气。 :)