Javascript: Receiving onClick on top of image inside a div, can it be done?

Question

I basically have a div set up with an onClick action like so:

myDiv.setAttribute("onclick", myAction);

And later on, I place an image inside the div like this:

myDiv.innerHTML = '<img src="' + myImage + '" height="' + myDiv.height + '" width="' + myDiv.width + '">';

.width and . height are properties I have created for myDiv.

So my problem is that when I place the image inside the div, myDiv's onClick is not responding, is there anyway to solve this. I know of the div property backgroundImage, but that one does not support customizing of size in all browsers. I tried to give the image the same onClick action that the div has but that just got messy, is there any way to make javascript ignore the image and register a click in the div even though the click is in the image inside the div?

Visual explanation of the problem:

http://bildr.no/view/860258

Thank you.

Can you tell us what `myAction` is? Maybe its incorrectly formatted? — Mark Costello, Apr 07 '11 at 18:58
Sorry about that, myActon is a string, myAction = "action()".. so it should be fine ? — JulenissensHjelper, Apr 08 '11 at 12:01
Are you using Internet Explorer? because there's an issue with the way you're doing things with IE. This link might help: http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie — Mark Costello, Apr 08 '11 at 15:44
No, im actually using safari.. Check out the image I included in the original post, that might help me reach to you guys.. — JulenissensHjelper, Apr 08 '11 at 18:14
Absolutely, it even works outside the image inside the div when i set it up like the illustration, but also works before the image is added. I dont know why the onClick doesnt nest/bubble. — JulenissensHjelper, Apr 08 '11 at 20:03

score 2 · Accepted Answer · answered Apr 08 '11 at 20:49

Rather than overwriting the innerHTML of the div, why not do something like this?

var img = document.createElement('img');
img.setAttribute('src', myImage);
img.setAttribute('width', myDiv.width);
img.setAttribute('height', myDiv.height);
myDiv.appendChild(img);

score 0 · Answer 2 · answered Apr 07 '11 at 18:57

0

First thing I thought of was Don't events bubble up? I started searching and turned up this. I think that might be an interresting read.

answered Apr 07 '11 at 18:57

NKCSS

2,716
1
22
38

That is quite interesting. I will try to figure it out with those methods. – JulenissensHjelper Apr 08 '11 at 11:59

score 0 · Answer 3 · answered Apr 07 '11 at 18:59

0

Yes, and what you're looking for is event propagation. A JS library like jQuery might be really helpful for something like this. jQuery uses a .live() function to accomplish event propagation.

For the given HTML:

<div class="imageWrap">
    <img src="someimage.jpg">
</div>

You would use something like:

$(".imageWrap").live("click", function (event) {
    // Do something awesome here
    $(event.target).addClass("clicked");
});

The click on the image should "propagate" or bubble up to the div, where it can be caught and processed. Event bubbling is incredibly useful once you get the hang of how it works.

answered Apr 07 '11 at 18:59

S Pangborn

12,593
6
24
24

3

there is **NO** reason to use jquery for such a trivail thing. and the OP did not even tag jquery. – Naftali Apr 07 '11 at 19:09
Yeah, I do want to do this without using jQuery.. Does anyone have a solution? – JulenissensHjelper Apr 08 '11 at 11:56

score 0 · Answer 4 · edited Apr 20 '11 at 17:59

0

I found your issue.

Here is the fiddle: http://jsfiddle.net/maniator/gN4e9/

The issue is on this line: myDiv.setAttribute("onclick", myAction);

That is placing the whole myAction function into the onclick which you don't want.

Change it to: myDiv.setAttribute("onclick", 'myAction()'); and it should work fine.

edited Apr 20 '11 at 17:59

user229044

232,980
40
330
338

answered Apr 07 '11 at 19:09

Naftali

144,921
39
244
303

@NorthCode well you never posted what myAction is, so i had to go with what i had – Naftali Apr 08 '11 at 13:50

Javascript: Receiving onClick on top of image inside a div, can it be done?

4 Answers4