事件委托点击缩略图不显示主图像答案

【问题标题】：event delegation click on thumbnails not showing main image事件委托点击缩略图不显示主图像
【发布时间】：2013-12-24 14:01:07
【问题描述】：

我尝试创建缩略图，单击时会显示在主图像中。我已经测试了代码，一切似乎都井井有条，但是单击缩略图时没有显示主图像。 chrome 中显示 404 错误消息。我知道文件路径是正确的，因为当我删除 preventDefault() 时，链接会显示包含图像的文件？

我已经玩了一段时间了。我没有看到的代码中是否有错误或我没有考虑到某些操作。我是 javascript 新手。

    <img id="viewer" src="images/motorbike-girl.jpg" width='450px' />
    <div id='thumbs'>
       <a href='images/chicks.jpg'><img src='images/chicks-thumb.jpg'/></a>
       <a href='images/motorbike-girl.jpg'><img src='images/motorbike-girl-thumb.jpg'/></a>
       <a href='images/yamaha.jpg'><img src='images/yamaha-thumb.PNG' /></a>
    </div>

 var thumbs = document.getElementById('thumbs');
 var img = document.getElementById('viewer');

 thumbs.onclick = function(event) {

   var target = event.target;

   while(target != thumbs) {

    if(target.nodeName == 'A') {
      img.src = this.href;
      event.preventDefault();
    }
     target = target.parentNode;

  }
}

【问题讨论】：

标签： javascript html event-delegation

【解决方案1】：

这一行：

img.src = this.href;

应该是：

img.src = target.href;

找到A 节点并设置图像源后，您还应该将break 退出循环。

【讨论】：

【解决方案2】：

使用用途：

img.src = this.href;

应该使用：

img.src = target.href;

【讨论】：