javascript - 从 parent 的 onclick 事件中检测点击了哪个 child

Question

我有一个包含许多 img 元素的表格。该表注册了 onclick 事件，当它收到 onclick 事件时，我想确定点击了哪个 img(如果有的话)。

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

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

<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

您正在使用 jQuery，因此您可以使用内置的事件委托(delegate)功能:

$('table').on('click', 'img', function () {
    //now `this` refers the the image being clicked
});

这是一个演示:http://jsfiddle.net/LMzeB/1/

请注意 .on() 是 jQuery 1.7 中的新内容，对于 1.4.2 和 1.7 之间的版本，您可以使用 `.delegate():

$('table').delegate('img', 'click', function () {
    //now `this` refers the the image being clicked
});

这是一个演示:http://jsfiddle.net/LMzeB/2/

您还可以使用提供给事件处理程序的 event 对象:

$('table').on('click', function (event) {
    //event.target is the initial target of the element
});

这是一个演示:http://jsfiddle.net/LMzeB/