捕获元素jquery外部的mousedown事件

capture mousedown event outside of an element jquery

本文关键字：mousedown 事件 外部 jquery 元素      更新时间：2024-05-04

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>

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

我想做的是当鼠标放下时显示popover，并用鼠标放下事件隐藏popover。但当我点击popover时，它不应该隐藏。

$('#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');
});
相关文章：