Popper.js:单击外面时如何关闭弹出窗口

Question

我正在使用popper.js在使用类.js-share-cf-btn单击元素时显示具有 .js-share-cf-popover类的弹出式弹出式Elment。

，但我希望弹出窗口仅在单击外面时关闭。在这里，我显示弹出窗口的实际代码：

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',
  });
});

我在这里找到了一些东西，但我无法做到它

在这里我的JSFIDDLE

Answer 1

您可以通过删除事件委托并在事件上检查目标，然后使用.is(((如果e.target等于引用按钮，否则hide(来实现这一目标弹出式(

请参阅小提琴

添加摘要作为您的代码：

还在Popper实例中进行了更改，您应该通过当前单击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 popper 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>

Answer 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/

Answer 3

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

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

Answer 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>