JQuery: tr onblur or any event outside tr border

Question

How to call function with tr onblur event or how to detect any click-event outside tr border?

Thanks

Html:

<tr id="tr_0" class="table" onblur="Dict[@i].Canc(@j)">
    <td id="frst_0" class="tabl">
        <label id="lbl0_0" class="tdLbl0_0">Some name</label>
        <input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[@i].CheckInput0(@j)" />
    </td>
    <td id="sec_0" class="tabl" onclick="Dict[@i].EditInput1(@j)">
        <label id="lbl1_0" class="tdLbl1">Value</label>
        <input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[@i].CheckInput1(@j)" onfocus="Dict[@i].ClearInput1(@j)" />
    </td>
    <td>
        <button id="suc_0" class="tdbtn" hidden onclick="Dict[@i].Suc(@j)">Success</button>
        <button id="edit_0" class="tdbtn" onclick="Dict[@i].Edit(@j)">Edit</button>
        <button id="del_0" class="tdbtn" onclick="Dict[@i].Del(@j)">Delete</button>
        <button id="canc_0" class="tdbtn" onclick="Dict[@i].Canc(@j)" hidden>Cancel</button>
    </td>
</tr>

Answer 1

Use jQuery.closest to see if the target element is inside a tr or a tr like this:

$(document).click(function(e) {
  if($(e.target).closest("tr").length)
    alert("tr was clicked!");
  else
    alert("no tr was clicked!");
});

If you want to just check if the element clicked is a tr or not then use jQuery.is like this:

$(document).click(function(e) {
  if($(e.target).is("tr"))
    alert("tr was clicked!");
  else
    alert("no tr was clicked!");
});

Example of the first case:

$(document).click(function(e) {
  if ($(e.target).closest("tr").length) // if the length is != 0 (a tr is found)
    alert("tr was clicked!");
  else                                  // otherwise ...
    alert("no tr was clicked!");
});

tr {
  background: #F99;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="tr_0" class="table" onblur="Dict[@i].Canc(@j)">
    <td id="frst_0" class="tabl">
      <label id="lbl0_0" class="tdLbl0_0">Some name</label>
      <input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[@i].CheckInput0(@j)" />
    </td>
    <td id="sec_0" class="tabl" onclick="Dict[@i].EditInput1(@j)">
      <label id="lbl1_0" class="tdLbl1">Value</label>
      <input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[@i].CheckInput1(@j)" onfocus="Dict[@i].ClearInput1(@j)" />
    </td>
    <td>
      <button id="suc_0" class="tdbtn" hidden onclick="Dict[@i].Suc(@j)">Success</button>
      <button id="edit_0" class="tdbtn" onclick="Dict[@i].Edit(@j)">Edit</button>
      <button id="del_0" class="tdbtn" onclick="Dict[@i].Del(@j)">Delete</button>
      <button id="canc_0" class="tdbtn" onclick="Dict[@i].Canc(@j)" hidden>Cancel</button>
    </td>
  </tr>
</table>

Example of the second case:

$(document).click(function(e) {
  if ($(e.target).is("tr"))     // if the target of the click is a tr
    alert("tr was clicked!");
  else                          // otherwise
    alert("no tr was clicked!");
});

tr {
  background: #F99;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="tr_0" class="table" onblur="Dict[@i].Canc(@j)">
    <td id="frst_0" class="tabl">
      <label id="lbl0_0" class="tdLbl0_0">Some name</label>
      <input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[@i].CheckInput0(@j)" />
    </td>
    <td id="sec_0" class="tabl" onclick="Dict[@i].EditInput1(@j)">
      <label id="lbl1_0" class="tdLbl1">Value</label>
      <input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[@i].CheckInput1(@j)" onfocus="Dict[@i].ClearInput1(@j)" />
    </td>
    <td>
      <button id="suc_0" class="tdbtn" hidden onclick="Dict[@i].Suc(@j)">Success</button>
      <button id="edit_0" class="tdbtn" onclick="Dict[@i].Edit(@j)">Edit</button>
      <button id="del_0" class="tdbtn" onclick="Dict[@i].Del(@j)">Delete</button>
      <button id="canc_0" class="tdbtn" onclick="Dict[@i].Canc(@j)" hidden>Cancel</button>
    </td>
  </tr>
</table>