捕获元素jquery之外的mousedown事件

Question

 var onEnableHelpCheckChange = function() { // Checking weather checkbox is checked if ($("#enable-help").prop('checked') === true) { $('#nav-help-img').attr('src','/assets/images/help-1.png'); appendPreviousImages(); // bind custom context menu $('#helpDiv').on("mousedown", function (event) { if(isAnyPopOver2Visible){ if(!$(this).closest('#popover-output-div').length){ $('.helpBtn').popover('hide'); } isAnyPopOver2Visible = false; } }); } }; 

 <div class="popover-output popover font-size-9pt" id="popover-output-div"> <label id="lbl-output-help"></label> <textarea class="resize-none font-size-9pt width-400px" rows="6" id="txt-output-help" hidden></textarea> <div class="row font-size-8pt popover-footer"> <a href="javascript:void(0);" id="btn-edit" onclick="BusinessPortal.Help.editHelpText();">Edit</a> <a class="padding-left-10px" href="javascript:void(0);" id="btn-remove" onclick="BusinessPortal.Help.removeHelpPopover();">Remove</a> <a href="javascript:void(0);" id="editable-save" onclick="BusinessPortal.Help.saveEditedHelpText();" hidden>Save</a> </div> </div> 

我有以下代码隐藏弹出窗口和按钮。 但问题是，即使我点击弹出窗口上的按钮，它也会隐藏。

我想要做的是在hoved时显示popover并用mousedown事件隐藏popover。 但是当我点击popover时它不应该隐藏。

$('#helpDiv').on("mousedown", function (event) {
    $('.helpBtn').popover('hide');
});

Answer 1

您可以使用.closest()和弹出元素选择器来检查是否在弹出窗口中单击。 如果没有那么只隐藏弹出窗口：

$('#helpDiv').on("mousedown", function (e) {
if(!$(e.target).closest('#popover-output-div').length)
   $('.helpBtn').popover('hide');
});