Javascript 表体中的event.target提供了错误的上下文，自定义上下文菜单的div重叠

更新

下面的问题是我之前问的。我发现是菜单div导致了这个问题。单击

td

上的事件，我打开一个自定义上下文菜单。菜单的Div与td有一点重叠。之后，上下文菜单和所有其他

tds

都可以正常工作。但重叠的td无法找到正确的上下文，因此它显示了最上面的div

我的问题是如何找到稍微重叠的td？我试图通过上下文菜单上的抑制指针事件查看。在这种情况下，td可以工作，但上下文菜单会立即关闭

如果我在td中单击关联菜单，然后拖动鼠标而不使用 离开后我会得到正确的结果

上一个问题 我有一个包含输入、按钮和数据表等元素的页面。我想知道 如果单击了

td

，则“打开一个菜单”即可

现在，如果用户“单击页面上除此之外的任何位置”，则“关闭菜单”

要打开菜单，请执行以下操作（有效）：

关闭条件为如果用户（单击除

之外的任何位置#tbl tbody tr td

） 所以我这样做：

$(document).on('click', function (e) {
   console.log(e.target);
});

这个东西在页面上的任何地方都能工作，并给出正确的目标。即使在

thead上

和

tfoot

但不在

tbody

内。如果单击，它将给出最顶层的

div

在车身内侧的

td

我使用的是DataTable，表是动态绘制的。虽然

thead和tfoot

的绘制方式相同，但我可以找到用户是否单击了

th

，而不是

td

。我正在使用jQuery 2.1.1

html页面与此类似：

<div>
    <input id="txtInput" type="text" class="form-control dt CLICKsHOWScORRECTtARGET"/>
    <button id="btnSearch" class="btn btn-info" type="button" value="0">Search</button>
</div>
<div id="topMostReturnedForTDonly">
    <div id="fewLevelsOfDivNotReturned">
         <table id="tbl">
             <tr><td tag="clickOpensMenu">TEXT</td>
                <td tag="butClickCanNotCloseAsTargetShowsTopMost">TEXT</td></tr>
         </table>
    </div>
</div>

这就是问题发生的地方：

$(document).on('click', function (e) {
      console.log(e.target.className);
      console.log($('#tblJ1:hover, tbody:hover, tr:hover, td:hover').length );
      if (e.target != MyTarget) {
           rgtClickContextMenu.style.display = 'none';
      }....

一些CSS：

  <style>
    .cmenu { position:fixed; display:none; }
    .cmenu ul, #menu li {
        list-style:none;
        margin:0; padding:0;
        background:white;
    }
    .cmenu { border:solid 1px #CCC;}
    .cmenu li { border-bottom:solid 1px #CCC; }
    .cmenu li:last-child { border:none; }
    .cmenu li a {
        display:block;
        padding:5px 10px; 
        text-decoration:none;
        color:#57889c;
    }
    .cmenu li a:hover {
        background:#57889c;
        color:#FFF;
    }
</style>

.cmenu{位置：固定；显示：无；}
.cmenu ul，#menu li{
列表样式：无；
边距：0；填充：0；
背景：白色；
}
.cmenu{边框：实心1px#CCC；}
.cmenu li{边框底部：实心1px#CCC；}
.cmenu li:最后一个子项{border:none；}
李安先生{
显示：块；
填充物：5px10px；
文字装饰：无；
颜色：#57889c；
}
.cmenu li a:悬停{
背景：#57889c；
颜色：#FFF；
}

如果我把菜单隐藏起来，所有的东西都能工作，但当它显示出来时就不行了

---

这是另一种解决方案

如果您的任何项目当前处于悬停状态，请选中“单击”：

$(document).on('click', function (e) {
  if($('#tbl:hover, tbody:hover, tr:hover, td:hover').length > 0){

    // on elements, not closing

  }else{

    // not on elements (close-condition)
  }
});

我想这一个更好，因为“单击”将始终级联所有实际单击的Dom元素，包括所有包含和包装的元素

---

els

给出了tfoot的长度，thead而不是td。让我检查一下我是否遗漏了提供一些信息。我将用菜单代码更新问题。请检查我更新的问题。现在我的问题是，如何找到单击附近的元素（菜单div除外），因为打开时会导致问题。请尝试提供一个“完整表”，包括tbody等。此外，“标记属性”对td elementstag无效。Stag旨在显示此处发生的情况，我已准确更新了发现问题的位置，打开时的菜单会导致问题，因为它位于最顶部的div中。单击会被菜单div捕获，

$(document).on('click', function (e) {
      console.log(e.target.className);
      console.log($('#tblJ1:hover, tbody:hover, tr:hover, td:hover').length );
      if (e.target != MyTarget) {
           rgtClickContextMenu.style.display = 'none';
      }....

  <style>
    .cmenu { position:fixed; display:none; }
    .cmenu ul, #menu li {
        list-style:none;
        margin:0; padding:0;
        background:white;
    }
    .cmenu { border:solid 1px #CCC;}
    .cmenu li { border-bottom:solid 1px #CCC; }
    .cmenu li:last-child { border:none; }
    .cmenu li a {
        display:block;
        padding:5px 10px; 
        text-decoration:none;
        color:#57889c;
    }
    .cmenu li a:hover {
        background:#57889c;
        color:#FFF;
    }
</style>

$(document).on('click', function (e) {
  if($('#tbl:hover, tbody:hover, tr:hover, td:hover').length > 0){

    // on elements, not closing

  }else{

    // not on elements (close-condition)
  }
});