Javascript 如何防止在使用jQuery单击弹出窗口时关闭它？

我正在创建一个jQuery插件，它允许我轻松地显示弹出窗口。在这种情况下，触发器元素是一个输入，目标元素是一个div。因此，该功能基于

focus

和

blur

事件。当输入获得焦点时，弹出窗口打开，当其变得模糊时，弹出窗口关闭。我需要弹出窗口保持打开，当我点击它，它关闭，因为我已经设置了模糊事件。我尝试将jQuery

off（）

函数插入到插件中的自定义

blur（）

函数中，但它不起作用

我希望能够在弹出窗口内单击而不关闭它，即使输入处于模糊状态，或者如果有人可以为我提供更好的插件方法，那也将非常好

JS代码

    /*
 * Popbox plugin
 */

 $.fn.adPopbox = function(target){      
      return this.each( function() {
          var enabler = $(this)

              function focus() {               
                 return enabler.focus( function(){                           
                             target.addClass('triggered');                                                           
                        });
              }

              function blur() {                     
                 return enabler.blur( function(){                          
                            target.removeClass('triggered');                         
                        });
              }   

              function popbox() {
                 return target.click( function(){                      
                            target.addClass('triggered');       
                        });
              }

          focus();
          blur();
          popbox();

      });         
  }


/*
 * Invoke Popbox plugin
 */

    $(".popover-trigger").adPopbox($('.popover'));

<div class="input-wrapper">
   <input type="text" class="popover-trigger">
</div>

<div class="popover">
   <p>Content to be showed!</p>
</div>

HTML代码

    /*
 * Popbox plugin
 */

 $.fn.adPopbox = function(target){      
      return this.each( function() {
          var enabler = $(this)

              function focus() {               
                 return enabler.focus( function(){                           
                             target.addClass('triggered');                                                           
                        });
              }

              function blur() {                     
                 return enabler.blur( function(){                          
                            target.removeClass('triggered');                         
                        });
              }   

              function popbox() {
                 return target.click( function(){                      
                            target.addClass('triggered');       
                        });
              }

          focus();
          blur();
          popbox();

      });         
  }


/*
 * Invoke Popbox plugin
 */

    $(".popover-trigger").adPopbox($('.popover'));

<div class="input-wrapper">
   <input type="text" class="popover-trigger">
</div>

<div class="popover">
   <p>Content to be showed!</p>
</div>

内容有待展示

---

您不能使用事件

模糊

，因为当您在输入外部单击时，首先触发的是

模糊

事件，然后是事件

单击

，但此时，您的弹出窗口已隐藏，目标位于下方，即主体上

---

您还应该使用文档上的

单击

事件来关闭弹出窗口，通过以下答案激励您：

我想我会删除模糊事件，看看什么最有效，然后检查您的建议答案。谢谢