javascript - 表体内的 event.target 给出了错误的上下文，自定义上下文菜单的 div 重叠

问题描述

更新

下面的问题是我之前问的。我发现是菜单 div 导致了问题。在单击事件时，td我会打开一个自定义上下文菜单。菜单的 Div 与 td 有一点重叠。之后，上下文菜单等所有内容都tds可以正常工作。但是重叠的 td 找不到正确的上下文，所以它显示最上面的 div。

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

如果我在带有上下文菜单的 td 中单击，然后拖动鼠标而不离开，那么我会得到正确的结果！！！

上一个问题 我有一个页面，其中包含输入、按钮和 DataTable 表等元素。我想知道如果td然后clicked“打开菜单”有效。

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

要打开菜单，我这样做（有效）：

$(document).on('click', '#tbl tbody tr td', function () {
   //open menu
});

关闭条件是如果用户（单击除之外的任何地方#tbl tbody tr td）所以我这样做：

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

这个东西可以在页面上的任何地方工作并给出正确的目标。即使在thead 但tfoot不在里面tbody。div如果我点击tdiniside tbody ，它会给出最高的。

我正在使用 DataTable 并且表格是动态绘制的。虽然thead and 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>

错误来源 这是导致问题的代码：

我有菜单html：

<div id="menu" class="cmenu">
    <ul>
       <li><a href="#" class="billSummary">Bill Summary</a></li>
       <li><a href="#" class="shareSummary">Share Summary</a></li>
       <li style="color: lightgray" class="closeContextMenu">&nbsp;&nbsp;&nbsp;CLOSE - X</li>
    </ul>
</div>

如果我评论此代码，则会显示正确的目标。这是我使用这个 div 的方式：

var rgtClickContextMenu = document.getElementById('menu');
$(document).on('mousedown', '#tblJ1 tbody tr td', function (e) {
   if (e.which == 3) {
       rgtClickContextMenu.style.display = 'none';
    }
   else {
       e.preventDefault();
       rgtClickContextMenu.style.left = e.pageX + 'px';
       rgtClickContextMenu.style.top = e.pageY + 'px';
       rgtClickContextMenu.style.display = 'block';
     }
  });

这是发生问题的地方：

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

如果我保持菜单隐藏，一切正常，但在显示时无效。

标签： javascriptjquery

javascript - 表体内的 event.target 给出了错误的上下文，自定义上下文菜单的 div 重叠

问题描述

解决方案

推荐阅读