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>

Answer 2

您可以在文档本身上绑定点击事件，并检查 event.target 对象，如果 event.target 的父对象不包含tr，手动触发 tr 上的 blur 事件。

$.fn.bindBlur = function(callback){
    this.each(function(){
        var that = this;
        $(document).on("click", function(e){
            if(that.is($(e.target) || that.has($(e.target))){
                return callback();
            }
        });
    });    
};

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

JQuery: tr onblur or any event outside tr border

javascript

jquery

row

html-table

onblur