jQuery use $(document).click event as a 'cancel selection' event

Question

I'm building an app.net page using jQuery for DOM manipulation (JS Fiddle here). When I click a certain <td> on the table it becomes target for future manipulation. I want to add code, so that a click anywhere outside the table will un-target that <td> (meaning a click in the background should act as a cancel selection event).

The answers to this question did not help me, because: A. I don't want to use stopPropagation() because of this article plus I have many click event handlers in my code that I will have to stop from propagating). B. I have other elements on the page (buttons, text-input fields) which should NOT act as a cancel selection event).

Answer 1

Without more specifics it seems like toggling an active class on target cells would do what you are suggesting.

var $table = $('#myTable').on('click', 'td', function(){
    $table.find('.active').removeClass('active');
     $(this).addClass('active');
});

Then for removing using events outside table just check if target is in the table

$(document).click(function(e){
  if(!$(e.target).closest('#myTable').length){
      $table.find('active').removeClass('active');
  }
});