Popper.js：单击外部时如何关闭弹出窗口答案

【问题标题】：Popper.js: How to close popup when clicking outsidePopper.js：单击外部时如何关闭弹出窗口
【发布时间】：2018-04-04 09:27:30
【问题描述】：

我使用Popper.js 来显示一个弹出元素，当单击类.js-share-cf-btn 的元素时，它具有类.js-share-cf-popover。

但我希望仅当我在其外部单击时才关闭弹出窗口。这是我显示弹出窗口的实际代码：

var reference = $('.js-share-cf-btn');
var popover = $('.js-share-cf-popover');
popover.hide();

$(document).on('click', reference, function(e) {
  e.preventDefault();

  popover.show();

  var popper = new Popper(reference, popover, {
    placement: 'top',
  });
});

我发现了一些东西 here 但我无法让它工作

这里是我的jsfiddle

【问题讨论】：

你能提供一个jsfiddle吗？帮助你会更容易
嗨@QuentinRoger jsfiddle在我的问题中添加

标签： javascript jquery tooltip popper.js

【解决方案1】：

您可以通过删除事件委托并使用 .is() 检查事件点击时的目标来实现这一点，（比较 e.target 是否等于引用 btn 否则隐藏弹出窗口）

见fiddle

添加了 sn-p 作为您的代码：

还对Popper indtance 进行了更改，您应该通过当前点击js-share-cf-btn 所以$(e.target) 元素

$(function() {
  var reference = $('.js-share-cf-btn');
  var popover = $('.js-share-cf-popover');
  popover.hide();

  $(document).on('click touchend', function(e) {
    var target = $(e.target);
    // ne need to reshow and recreate poper when click over popup so return;
    if(target.is(popover)) return;
    if (target.is(reference)) {
      e.preventDefault();

      popover.show();

      var popper = new Popper(target, popover, {
        placement: 'top',
      });
    }else {
      popover.hide();
    }
  });

});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.section {
  background: #fff;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  margin-bottom: 20px;
}

.share-popover {
  background: red;
  color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="section">
  <p>Section 1</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="section">
  <p>Section 2</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="section">
  <p>Section 3</p>
  <a href="#" class="js-share-cf-btn">This is the trigger</a>
</div>

<div class="share-popover js-share-cf-popover">
  This is the popup
</div>

【讨论】：

嗨，当我在弹出窗口内单击时，它会关闭。我希望它仅在单击外部时关闭。
@FredK 按照您的描述添加了 fiddle 和 sn-p，jsfiddle.net/xpvt214o/44982 是否有效？
您可以将 click 事件替换为 click touch 以覆盖移动设备。
或者click touchend

【解决方案2】：

这样的事情应该可以解决问题（通过在您单击某处时检查目标）：

$(function() {
  var ref = $('.js-share-cf-btn');
  var popover = $('.js-share-cf-popover');
  popover.hide();

  $(document).on('click', function(e) {
    var target = $(e.target);
    if (target.is(ref) || target.is(popover) ) {
      e.preventDefault();
      popover.show();
      var popper = new Popper(ref, popover, {
        placement: 'right',
      });
    }else {
      popover.hide();
    }
  });

});

https://jsfiddle.net/e8aL9tje/

【讨论】：

嗨，我有多个按钮：当单击一个按钮时，您的代码会显示每个按钮的弹出窗口。在这里查看：jsfiddle.net/tdo2efrs
这样的东西更好吗？ jsfiddle.net/hovaqnxz祝你有美好的一天！
这是一个改进，但仍然有些奇怪：单击第一个按钮，然后单击第二个按钮。结果：我打开了 2 个弹出窗口，而第一个应该关闭。

【解决方案3】：

对于那些使用 React 的人，我创建了一个 HOC 的要点，您可以将其附加到任何组件以在外部单击时关闭它：

https://gist.github.com/elie222/850bc4adede99650508aba2090cd5da1

【讨论】：

【解决方案4】：

我找到了一个非常简单的解决方案。

jQuery 版本

<div class="Popper">
    <div class="stopPropagation">
        <p>Clicking on me won't close the Popper</p>
    </div>
</div>

$('.stopPropagation').on('click touchend', function(e) {
    e.stopPropagation()
})

由于点击事件不会向上传播到 Popper，所以点击时 Popper 不会关闭。

React 版本

<Popper>
    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
    <div onClick={e => e.stopPropagation()} role="none">
        <p>Clicking on me won't close the Popper</p>
    </div>
</Popper>

【讨论】：