Question

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) when 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?

Answer 1

Your can cancel event-bubbling by adding

event.cancelBubble = true;

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