Question

Simplfied版本的代码：

<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

您应该确保图像不被display: hidden;

等css规则隐藏

＆＃13;

<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>

＆＃13;

Answer 2

据我所知，您的代码应该可行。见下文。

为什么它不起作用？

的可能性：

您没有正确定义runFunction（）。
您的图片未正确加载
你在某个地方有错字
您在此页面上有另一个错误导致Javascript崩溃，可能是跨源问题或其他一些错误功能。

var clicks = 0;

function runFunction() {
  clicks++;
  var counter = document.getElementById('counter');
  counter.innerText = 'runFunction ' + clicks;

}

.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;
}

#counter {
  margin-top: 100px
  }

<nav id="nav">
    <div>
        <img class="normal-logo" onclick="runFunction()" src="http://lorempixel.com/20/20/abstract">
    </div>
</nav>
<div id='counter'></div>

检测nav元素内的图像点击

2 个答案: