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.&nbsp;一个可能的解决方案是应用pointer-events: none到.overlay

Answer 2

您可以尝试与锚标记一起使用<a&nbsp;onclick="openNav1();"><img&nbsp;src="img/image.jpg"&nbsp;alt="Snow"&nbsp;style="width:100%"&nbsp;>&nbsp;</a>

Answer 3

你的 Javascript 正在工作，但你不知道，因为它的显示风格已经Block所以我把 Display 改为None并在 JavaScript 的希望中为你做了一个小改动你喜欢它。关闭导航（）；函数不是必需的，因为现在#myNav1通过单击图像打开和关闭。<div class="column">&nbsp; &nbsp; <img id="img"&nbsp; src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"&nbsp; height='250px' alt="Snow" style="width:100%" onClick="openNav1();" />&nbsp; &nbsp; &nbsp;<div style='display:none' class="overlay" id="myNav1">&nbsp; <a&nbsp; href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>&nbsp; &nbsp; <div class="text">Info</div>&nbsp; </div>&nbsp; </div><script type="text/javascript">function openNav1() {var mynav = document.getElementById("myNav1");var img = document.getElementById("img");&nbsp; img.style.cursor = "pointer";&nbsp; if (mynav.style.display == "block") {&nbsp; mynav.style.display = "none";&nbsp; } else {&nbsp; mynav.style.display = "block";&nbsp; }}function closeNav() {&nbsp; document.getElementById("myNav1").style.display = "none";}</script>