javascript - 在元素jquery外部捕获mousedown事件

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>

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

我想做的是在收藏时显示弹出框，并通过mousedown事件隐藏弹出框。但是，当我单击弹出框时，它不应隐藏。

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

最佳答案

您可以将.closest()与弹出元素选择器一起使用，以检查是否在弹出窗口中单击。如果不是，则仅隐藏弹出窗口：

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

关于javascript - 在元素jquery外部捕获mousedown事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36569662/