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

Question

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