Обновление
ниже вопрос, который я задавал ранее. Я обнаружил, что это меню DIV вызывает проблемы. При нажатии на событие td я открываю пользовательское контекстное меню. Div меню немного перекрывает тд. После этого все, как контекстное меню и все остальные tds работает нормально. Но перекрывающийся тд не может найти правильный контекст, поэтому он показывает самый верхний элемент div.
Мой вопрос: как мне найти тд немного перекрывающийся? Я пытался увидеть с подавлением события указателя в контекстном меню. В этом случае тд работает, но контекстное меню закрывается мгновенно.
Если я щелкну тд с контекстным меню, а затем перетаскиваю мышь, не выходя, я получаю правильные результаты !!!
Предыдущий вопрос У меня есть страница с такими элементами, как ввод, кнопка и таблица 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, если я нажимаю td iniside 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"> 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>
Если я скрываю меню, все работает, но не тогда, когда оно отображается.