CODEWITHSUNDEEP
javascriptjqueryhtml
sazr
sazr

Reputation: 25928

Detect which child was clicked from parents onclick event

I have a table that contains many img elements. The table registers for the onclick event & when it receives the onclick event I want to determine which img was clicked(if any).

I know I could just place a onclick event in each img element then I'd know if they were clicked but it also involves writing alot of long lines that pass the same information(repeating code -see below for what I mean).

So is there a way to look at the event object passed in the onclick event to determine which img element was clicked? If not maybe theres a way to do a hittest/collision test? Or maybe you know of another way?

<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>

If I place an onclick event on each img it uses ALOT of repeating code:

<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>

Heres my function to attempt to determine which img element was clicked(when the table triggers the onclick event):

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
}

Upvotes: 5

Views: 5187

Answers (4)

Ghost-Man
Ghost-Man

Reputation: 2187

Instead of placing onclick on every img element, you can do as below in jquery:

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

EDIT:

Taking into account Jasper's comment, you can pass this or $(this) to the openslideshow() function. But you have to adjust the operations inside the openslideshow() function according to that.

Upvotes: 2

gaffleck
gaffleck

Reputation: 428

Using jquery would be the best bet here. 

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

    // the clicked image is $(this)

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

});

Upvotes: 0

Purag
Purag

Reputation: 17061

Use evt.target. This will give you the element that was clicked.

If you set a variable to that value, you can use it in the future to grab the src like so:

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

Upvotes: 3

Jasper
Jasper

Reputation: 76003

You are using jQuery so you can use the baked-in event delegation functionality:

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

Here is a demo: http://jsfiddle.net/LMzeB/1/

Note that .on() is new in jQuery 1.7 and for versions between 1.4.2 and 1.7 you can use `.delegate():

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

Here is a demo: http://jsfiddle.net/LMzeB/2/

You can also use the event object supplied to event handlers:

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

Here is a demo: http://jsfiddle.net/LMzeB/

Upvotes: 4

Related Questions