Clicking contained element also effectively (but wrongly) clicks its container

This is the problem page I'm developing.

Consider the leftmost column header, with header text "Undr." Here is the simplified html for that column header:

<th class="underlying" onclick="toggleColSelect(this);">
    <img class='ad' onclick="toggleColSortOrder(this);">
    Undr
</th>

The user can do two things in the column header:

1. select and deselect the column, by clicking the column header. EDIT: The column is selected when the column header has a yellow background; and unselected when the column header has a white background.

2. select ascending or descending sort on the column contents, by clicking the up/down-arrow image.

However, clicking the image also selects/deselects the column, which I don't want. When he clicks the image, I want to toggle the sort order only; I don't want to toggle the select on the column.

My JavaScript function toggleColSortOrder(); does indeed toggle only the sort order; but it seems the function to select the column also gets called (wrongly) wh开发者_如何学JAVAen the user clicks the image.

What I've tried: thinking this might somehow be a manifestation of bubble-up at work, I tried all combinations of returning true, false and nothing in each of the two functions. None of this had any effect. I'd like to avoid hacking the JavaScript any further.

Question: how, by changing my html or css, can I prevent the function toggleColSelect(); being called when the user clicks inside the up/down-arrow image?

Your can cancel event-bubbling by adding

event.cancelBubble = true;

to your functions. See this fiddle: http://jsfiddle.net/fcyCz/

Here is my theory, since your <img> tag is INSIDE your <th> tag, you cannot click the <img> without first 'clicking' through the <th>. If there was a way to un-nest these two tags, I would then assume that their functions would be called separately. Possibly using a <div> to align your <img> over the correct spot. I am going to try to do live adjusting of what I just said using firebug and see (if it doesnt break the javascript) if it works, and I will report back.

Good luck.

As Tomalak points out, the click event for the <img> is bubbling up to the parent <th>, and so you must specify otherwise in your function. Also, add a call to event.stopPropagation() for the browsers which have deprecated cancelBubble.