Question

我正在创建一个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'));

HTML代码

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

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

Here is a preview

Answer 1

您无法使用事件blur，因为当您在输入外部点击时，首先是触发的blur事件，然后是事件click，但此时，您的弹出窗口已经隐藏，目标位于下方，即身体。

您还应该使用文档上的click事件关闭弹出窗口，并通过以下答案激励您：https://stackoverflow.com/a/3028037/4864628

如何使用jQuery单击弹出窗口时阻止弹出窗口关闭？

1 个答案: