从父母 onclick 事件检测哪个孩子被点击

Question

我有一个包含许多 img 元素的表。该表注册 onclick 事件，当它收到 onclick 事件时，我想确定哪个 img 被单击（如果有）。

我知道我可以在每个 img 元素中放置一个 onclick 事件，然后我就知道它们是否被单击，但它还涉及编写大量传递相同信息的长行（重复代码 - 请参阅下面的内容了解我的意思）。

那么有没有办法通过查看onclick事件中传入的事件对象来判断哪个img元素被点击了呢？如果没有，也许有办法进行命中/碰撞测试？或者也许您知道另一种方法？

<table onclick="openslideshow( event, new Array("img1.png","img2.png","img3.png"), "Author SlideShow");">
    <tr>
        <td><img class="screenshot" src="img1.png"/></td>
        <td><img class="screenshot" src="img2.png"/></td>
        <td><img class="screenshot" src="img3.png"/></td>
    </tr>
</table>

如果我在每个 img 上放置一个 onclick 事件，它会使用大量重复代码：

<table>
    <tr>
        <td><img onclick="openslideshow( this, new Array("img1.png","img2.png","img3.png"), "Author SlideShow");" class="screenshot" src="img1.png"/></td>
        <td><img onclick="openslideshow( this, new Array("img1.png","img2.png","img3.png"), "Author SlideShow");" class="screenshot" src="img2.png"/></td>
        <td><img onclick="openslideshow( this, new Array("img1.png","img2.png","img3.png"), "Author SlideShow");" class="screenshot" src="img3.png"/></td>
    </tr>
</table>

这是我的函数，尝试确定单击了哪个 img 元素（当表触发 onclick 事件时）：

function openslideshow(evt, slideShowSrcs, dialogTitle)
{
    var selImg = evt.relatedTarget; // will this give me the clicked img & NOT the table?
    ... my code to open a JQuery dialog & show all slideShotSrcs in a sliding treadmill
}

Answer 1

使用evt.target。这将为您提供被单击的元素。

如果将变量设置为该值，则可以在将来使用它来获取src类似的内容：

var elem = evt.target,
    elemSrc = elem.src;
console.log( elemSrc );