javascript Popper.js：单击外部时如何关闭弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49647386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popper.js: How to close popup when clicking outside
提问by Fred K
I'm using Popper.jsto show a popup elment having the class .js-share-cf-popoverwhen clicking elements with class .js-share-cf-btn.
我正在使用Popper.js.js-share-cf-popover在单击带有 class 的元素时显示具有该类的弹出式元素.js-share-cf-btn。
But I want the popup to close only when I click outside of it. Here my actual code that show the popup:
但我希望只有当我在它外面单击时才关闭弹出窗口。这是我显示弹出窗口的实际代码：
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',
});
});
I found something herebut I can't get it works
Here My jsfiddle
这是我的jsfiddle
采纳答案by Springer F
You can achieve this , by removing event delegation and check the target on event click by using the .is(), ( compare e.target if it equals to reference btn otherwise hide popup )
您可以通过删除事件委托并使用.is()检查事件点击的目标来实现这一点，（如果 e.target 等于引用 btn，则比较它，否则隐藏弹出窗口）
See fiddle
见小提琴
Added snippet as your code :
添加片段作为您的代码：
also made change in the Popperindtance you should pass the current click js-share-cf-btnso the $(e.target)element
还对Popperindtance进行了更改，您应该传递当前单击，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>回答by Quentin Roger
Something like this should do the trick (by checking the target when you are clicking somewhere):
这样的事情应该可以解决问题（通过在单击某处时检查目标）：
$(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();
}
});
});
回答by Eliezer Steinbock
For those using React, I created a gist of an HOC that you can attach to any component to close it when clicked outside:
对于那些使用 React 的人，我创建了一个 HOC 的要点，您可以将其附加到任何组件以在外部单击时关闭它：
https://gist.github.com/elie222/850bc4adede99650508aba2090cd5da1
https://gist.github.com/elie222/850bc4adede99650508aba2090cd5da1
