javascript - JQuery:tr onblur 或 tr 边界之外的任何事件

Question

如何使用 tr onblur 事件调用函数或如何检测 tr 边界外的任何点击事件？

谢谢

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

使用 jQuery.closest 查看目标元素是否位于 tr 或 tr 内，如下所示:

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

如果您只想检查单击的元素是否为tr，则使用jQuery.is，如下所示:

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

第一种情况的示例:

$(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>

第二种情况的示例:

$(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>