Popper.js：單擊外部時如何關閉彈出窗口

Question

我正在使用Popper.js在單擊具有.js-share-cf-btn類的元素時顯示具有.js-share-cf-popover popover類.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',
  });
});

我在這里找到了一些東西，但我無法讓它工作

這是我的jsfiddle

Answer 1

您可以通過刪除事件委托並使用.is()檢查事件點擊的目標來實現這一點，（如果 e.target 等於引用 btn，則比較它，否則隱藏彈出窗口）

見小提琴

添加片段作為您的代碼：

還在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>

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 的人，我創建了一個 HOC 的要點，您可以將其附加到任何組件以在外部單擊時關閉它：

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

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 不會關閉。

反應版本

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