jQuery focusout event doesn't trigger on table element

问题

I'm trying to make a table support multiple row selection (for the moment just the CTRL + mouseclick combination). Everything works fine, but when I click outside the table area, the rows don't deselect. Unfortunately, I have found out that the focusout event doesn't trigger at all. Here's my code:

    $(".library tbody tr").live('click', function (event) {
        event.preventDefault();

        if (event.ctrlKey) {
            $(this).toggleClass('selected-row');
        } else {
            $(".library tbody tr").removeClass("selected-row");
            $(this).addClass("selected-row");
        }
    });

    $("table.library").live('click', function () {
        $(".library").addClass("focused");
    });

    $("table.library").live('focusout', function () {
        $(this).removeClass("focused");
    });

Has anyone else dealt with this issue? Thank you in advance!

回答1:

The 'focusout' event only fires when focus leaves elements which can be focused in the first place, such as input elements. A table element can't get that focus, as far as I know. You'd need to handle the deselection of selected rows in some other way, Lollero mentoned one possible solution in his comment on your question.

回答2:

Table element can also get focus if you use tabindex for table body or table element as

$('#tableId tbody').attr("tabindex", 1);

After this when you click on table it will get focus.

来源：https://stackoverflow.com/questions/10171313/jquery-focusout-event-doesnt-trigger-on-table-element