Question

我有一个包含许多img元素的表。该表注册了onclick事件＆amp;当它收到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

您正在使用jQuery，因此您可以使用带烘焙的事件委派功能：

$('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/

Answer 2

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

如果您将变量设置为该值，则可以在将来使用它来抓取src，如下所示：

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

Answer 3

不是在每个img元素上放置onclick，而是可以在jquery中执行以下操作：

$(document).ready(function()
{ 
     $("img.screenshot").click(function() 
     {
         openslideshow( $(this), new Array("img1.png","img2.png","img3.png"), "Author SlideShow");
     });
});

修改

考虑到Jasper的评论，您可以将this或$(this)传递给openslideshow()函数。但是你必须根据它调整openslideshow（）函数内的操作。

Answer 4

使用jquery是最好的选择。

$("table img").bind("click",function(){

    // the clicked image is $(this)

    //get the href
    var clickedImageHref = $(this).prop("href");

});

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

4 个答案: