Detect range de-select

Question

In a site that features data tables with lots for numbers I've added a helper function to select a given table so the user can copy data to clipboard and paste it in his favourite spreadsheet software. Please note that my function does not copy anything to clipboard, it simply highlights the appropriate HTML elements (i.e., the full <table>). This part is working fine.

I'm now implementing a feature request: images inside the table should not get copied along. My first idea was to just hide them when I select the table and, again, that's working fine. But I'd like to show them back when the table is no longer selected and there's my problem: I'm not sure about how to accomplish that part.

I've composed a fiddle with a simplified example. A typical table looks like this:

<div>
    <table class="data">
        <tr>
            <th>Table</th><td>#1</td><td><img src="/img/logo.png"></td>
        </tr>
    </table>
    <input type="button" class="select" value="Select">
</div>

It can be selected by two means:

1. The "Select" button below
2. Double-clicking on the table itself

... and the code to accomplish it is:

jQuery(function($){
    $("body").on("dblclick", "table.data", function(){
        selectTable($(this));
        return false;
    });
    $("body").on("click", ".select", function(){
        selectTable($(this).siblings("table.data:first"));
        return false;
    });
    $(document).on("click", noTableSelected);
});

function selectTable($table){
    $table.find("img").hide();
    selectNode($table[0]);
}
function noTableSelected(){
    $("table.data img").show();
}

... where selectNode() takes care of creating a text range and selecting it.

I need help with the $(document).on("click", noTableSelected); bit. Apart from being an overkill, it also triggers when user makes use of the context menu to reach the "Copy to clipboard" command. I've also tried capturing the blur event on the table but such event does not trigger when I thought it would (I guess it's useless when not dealing with form controls).

Any idea to launch noTableSelected() when applicable? Or, is there a better way to avoid copying images to clipboard?

Answer 1

One possible solution is to check the event.target property inside your document click handler. According to docs:

The DOM element that initiated the event.

You can check if the table generated the click event like this:

$(document).on("click", function(e){
    console.log("document was clicked");
    if ($(e.target).closest(".data").length == 0) {
        console.log("but the click wasn't triggered by .data");
    }
});

An alternate solution which comes to my mind is to place the images outside the table and use jQuery to position them over the cells. Easier if the size of images and cells are known. You can also put images in background (not sure if they get copied).