Javascript onclick 没有调用 <img> 上的函数

Question

我有一个图片库，点击每张图片后，我就翻转了一张图片，里面有一些关于图片的信息。我的问题是onclick我应用的不是调用函数，也没有出现错误console.log。可能的原因是什么，任何见解都会非常有帮助。卡在这个简单的问题上，但一无所知。<div class="column">  <img src="img/image.jpg" alt="Snow" style="width:100%" onclick="openNav1();">  <div class="overlay" id="myNav1">    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>    <div class="text">Info</div>  </div></div><script type="text/javascript">  function openNav1() {    console.log('in herre');    document.getElementById("myNav1").style.display = "block";  }  function closeNav() {    document.getElementById("myNav1").style.display = "none";  }</script>

Answer 1

兄弟，你有一个div.overlay.. 我想它覆盖了图像，因此你可能不会点击 ，<img />因为它总是在div.overlay. 一个可能的解决方案是应用pointer-events: none到.overlay

Answer 2

您可以尝试与锚标记一起使用

<a onclick="openNav1();"><img src="img/image.jpg" alt="Snow" style="width:100%" > </a>

Answer 3

你的 Javascript 正在工作，但你不知道，因为它的显示风格已经

Block所以我把 Display 改为None并在 JavaScript 的希望中为你做了一个小改动

你喜欢它。

关闭导航（）；函数不是必需的，因为现在#myNav1通过单击图像打开和关闭。

<div class="column">

    <img id="img"  src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"  height='250px' alt="Snow" style="width:100%" onClick="openNav1();" />

     <div style='display:none' class="overlay" id="myNav1">

  <a  href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <div class="text">Info</div>

  </div>

  </div>

<script type="text/javascript">

function openNav1() {

var mynav = document.getElementById("myNav1");

var img = document.getElementById("img");

  img.style.cursor = "pointer";

  if (mynav.style.display == "block") {

  mynav.style.display = "none";

  } else {

  mynav.style.display = "block";

  }

}

function closeNav() {

  document.getElementById("myNav1").style.display = "none";

}

</script>