点击带有.js-share-cf-popover
课程的元素时,我使用Popper.js来显示包含课程.js-share-cf-btn
的弹出元素。
但是我希望弹出窗口只有在我点击它之外才能关闭。这是我显示弹出窗口的实际代码:
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
答案 0 :(得分:5)
您可以通过删除事件委派并使用.is()检查事件点击目标来实现此目的(比较e.target,如果它等于引用btn,否则隐藏弹出窗口)
请参阅fiddle
添加了代码段作为代码:
还对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 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>
答案 1 :(得分:3)
这样的事情可以解决问题(通过在点击某处时检查目标):
$(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();
}
});
});
答案 2 :(得分:0)
我找到了一个非常简单的解决方案。
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>
答案 3 :(得分:-1)
对于那些使用React的人,我创建了一个HOC的要点,您可以将其附加到任何组件上,并在外部单击时将其关闭:
https://gist.github.com/elie222/850bc4adede99650508aba2090cd5da1