How can I stop an onclick event from firing for parent element when child is clicked?

Question

Hi,

I'm having two issues with onclick events, they are somewhat similar so I'll ask them both here.

First:

I have a checkbox in a div. The input has an onchange function and the div has an onclick function.

<div onclick="doSomething()">
     <input type="checkbox" onchange="doSomethingElse()" />
</div>

The problem is when I check/uncheck the checkbox both doSomething() and doSomethingElse() fire. Any ideas of how to stop this from occuring? I've tried doing onchange="doSomethingElse(event)" and the in doSomethingElse(e) function I had e.stopPropagation(); and this did not work.

Second:

I have an image in a div. The div has an onclick function but the image does not. The image is, purposely, larger than the div and overflows outside the div.

-----------------------
|        image        |
|   ---------------   |
|   |     div     |   |
|   |             |   |
|   ---------------   |
|                     |
-----------------------

I only want the onclick to fire if the user clicks within the bounds of the div box. However, the onclick event also fires if you click on a part of the image that has overflowed to the outside of the div... Any ideas?

The first question is more important to me than the second. But if someone can answer both that would be awesome!

Thanks in advance for your help,
Matt

Answer 1

For the second, you could put your div in front of the image, and not have the image tags inside the div. This should give you the functionality you require.

Answer 2

I'm not sure if your first one is a simplification or not. If that's exactly what it is, I'd simply remove the onClick from the div altogether.

But I suspect your actual case is more complicated so I'm not really offering that one as an answer.

For the second case, I'd actually divide up the image into five sections and only put one of them inside the div, as follows:

+------------------------------------------------------+
|                     Image part 1                     |
+------------------------------------------------------+
| Image part 2 | Image part 3 (and div) | Image part 4 |
+------------------------------------------------------+
|                     Image part 5                     |
+------------------------------------------------------+

Kludgy, I know, but I tend to go for the simplest solutions first.

Answer 3

You need to stop the propagation. You can use jQuery for this: Stopping Propagation.

Answer 4

For the first try also using e.preventBubble() and returning false from the handler.

For the second you can capture the click and check the target of the event. This is easiest if you use some library that normalizes events like jQuery where e.target returns you the exact element that the event was fired on. Another option is put the click handler not on the image but whatever container that you're overflowing the image on.

Answer 5

For your first question: IE doesn't support stopPropagation(), instead you should use e.cancelBubble = true. Just do a function check first to find out which method you should use (if (e.stopPropagation) {code}).

For your second question: Maybe include a second div that handles the click event?

<div><img src="image.jpg"/></div>
<div style="position:absolute" onclick="doSomething();"></div>

and then position the second div correctly

Answer 6

As well as or as an alternatative to stopping capturing the bubbling, each of your event functions should have some code that checks that the correct element has been clicked, use event.target, or event.scrElement in IE, to find the clicked element.

For your second question you probably want to use an image map, which is the HTML provided for clicking on a particular area of a image.

Answer 7

For your second question, you can get the coordinates of the pointer when the click event occured, and compare them to the coordinates of the div. (actual implementation depends on which js library you use)

For your first question, to stop an event from bubbling, you have to use

event.cancelBubble = true;
if(event.stopPropagation) event.stopPropagation();

Answer 8

second:

see also: [img onmousedown="if (!clicking) alert('parent clicked') " ...]

      [div onmousedown="clicking = true"
           onclick = " alert('child clicked") "
           onmouseup="clicking = false"