Determine child-most element clicked on for Javasc

Question

It might be that the way I'm approaching this just won't work, but to explain:

I have a DataTable with column sorting enabled via the default column header sorting graphic. In one of the column headers I also have a "select all" checkbox. The sorting and the "select all" both work, but I can't seem to prevent the sort operation from taking place when clicking on the select all checkbox.

The problem seems to be that the DataTables sort function is called ahead of the select all operation - in the capturing rather than bubbling up phase in what I understand to be the correct JS parlance.

I've been back and forward with this between different guides and forum posts, but am starting to wonder if it's going to work. I've added event.stopPropagation() to the select all routine, but because this is only called after the sort routine it seems of little use. I've also gone down the event.target route to conditionally only have the sort operation run if the clicked ID wasn't the checkbox, but for all I can tell the event object holds no reference to the original clicked element (does it?).

So, without editing the DataTables source (I'd really rather keep that off the shelf if at all possible), how do I have the sort routine run only when the column header itself is clicked, as opposed to a child element?

So I want something along the lines of:

function SelectAll(event)
{
    event.stopPropagation();  //Doesn't help

    ...
}

$("#table_id").on("order.dt", function (event, settings)
{
    if(event.not_clicked_select_all)
    {
        table_id.order();
    }
});

How might this be done? Thanks.

Edit: Jsfiddle

Answer 1

You can actually use a little css trickery with the z-index. Just put your inner div on a z-index that is higher than the cell.

th > div {
  z-index:9998;
}

That will allow your checkbox (not the SELECT ALL label) to function the way you want it to. If you want to allow users to be able to click on the label too, then (if you are able) wrap the SELECT ALL in a label element and apply the same event.stopPropogation and my css technique to that label as well. Like this:

HTML

<th><div><input type='checkbox' id='select_all' onchange='SelectAll(event, "select_all", "include_")'><label for='select_all'>&nbsp;SELECT ALL</label></div><div>h</div></th>

CSS

th > div {
  z-index:9998;
}
th > div > label {
  z-index:9999;
}

Javscript

$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});

If you don't have access to the source and cannot wrap SELECT ALL inside a label element, there is probably some other css trick you can do. The key is to be able to target the label text individually and set it's z-index property.

Here is a working sample with both the checkbox AND the label:

https://jsfiddle.net/mspinks/y1g450ng/1/