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!");
});

第一个案例：

＆＃13;

$(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!");
});

＆＃13;

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

＆＃13;

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

＆＃13;

第二种情况的例子：

＆＃13;

$(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!");
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

$.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 border之外的任何事件

2 个答案: