javascript - 在 img 中调用 onclick？

Question

我想点击几个缩略图，然后在缩略图上弹出一个更大的版本。我有我正在使用的代码，如果我在标签中将它设置为链接，它就可以工作，但我似乎无法使缩略图 img 本身可点击

HTML，有效的链接

 <li><a href="#" onclick="toggle('widget1')">Toggle</a></li>

JavaScript

function toggle(id) {
  var e = document.getElementById(id);

  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}

我想要可点击的HTML图片，这里是我试过的

<div id="wid1"><a href="#" onclick="toggle('widget1')"><img src="widLayOut1.jpg"   
height="200" width="200" /></a></div>

其余的 HTML

<div id="widget1" style="display:none"><img src="widget1.jpg" /></div>
enter code here

思想

Answer 1

您应该能够像任何其他元素一样向图像添加点击事件。先加一个id

<img id="yourImg" src="widLayOut1.jpg"

然后

document.getElementById("yourImg").addEventListener("click", function(){
    alert("You clicked the image");
});

当然，如果你想支持旧浏览器，你必须做更多的工作

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

if (img.addEventListener)
    img.addEventListener("click", function(){
        alert("You clicked the image");
    });
else if (img.attachEvent)
    img.attachEvent("onclick", function(){
        alert("You clicked the image");
    });
 else 
     alert("What are you using?!");  

编辑

我想多了

document.getElementById("yourImg").onclick = function() {
    alert("You clicked the image");
};

应该工作得很好。谢谢 mplungjan