html - 检测导航元素内图像的点击

Question

代码的简化版本:

<nav id="nav">
    <div>
        <img class="normal-logo" onclick="runFunction()" src="abc.png">
    </div>
</nav>

CSS:

.normal-logo {
    height:3em;
    float: left;
    margin-top: 0.625em;
    margin-left: 1em;
}

#nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #2F373F;
    width: 100%;
    height: 4.25em;
    line-height: 4.25em;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: default;
}

由于图像在导航中，因此不会检测到对图像的点击。

Answer 1

你应该确保你的图片没有被 css 规则隐藏，比如 display: hidden;

<nav id="nav">
    <div>
        <img id="my-image" src="abc.png">
    </div>
</nav>
<script>
  const image = document.getElementById('my-image');
  image.addEventListener('click', runFunction);
  
  function runFunction() {
    // ...
  }
</script>