javascript - Button 上的 Bootstrap 3 Popover 未正确关闭

Question

我遇到了使用 <button> 正确关闭 bootstrap 3 弹出窗口的问题元素。

需要做的是，当点击新按钮或点击现有按钮的焦点时，弹出框应该关闭。

这在一定程度上起作用，我的意思是按钮确实隐藏但未正确关闭。所以如果有按钮 x y z我通过单击 x 启动实例弹出显示正确。

现在接下来点击...说z . x将隐藏和z会显示。

到目前为止还不错吧？

当我再次点击 x 时会发生什么它完全关闭按钮(无显示)，随后单击将显示 x .

简而言之，虽然单击关闭焦点隐藏了弹出窗口，但它并没有完全关闭它。导致双击按钮再次显示它，而不是单击一次。

引用下面的 html 和 js:

HTML

<button type="button" class="btn btn-default videos-popover-button" href="#" data-container="body" data-toggle="popover" data-trigger="click" data-placement="bottom" data-html="true" data-content='
<p>{{{description}}}</p>
<form class="video-favorite-mobile">
    <input type="checkbox" checked="" name="favorite" value="favorite">
</form>
<form class="video-queue-mobile">
    <input type="checkbox" checked="" name="queue" value="queue">
</form>
<a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>'
data-trigger="focus" href="#" style="cursor: pointer;">
<img alt="{{name}}" src="{{thumbnail_large}}">
<div class="video-gallery-single">
    <p>{{{description}}}</p>
</div>
<div class="video-gallery-bottom">
    <form class="video-favorite">
        <input type="checkbox" checked="" name="favorite" value="favorite"
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to favorites'>
    </form>
    <form class="video-queue">
        <input type="checkbox" checked="" name="queue" value="queue" 
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to queue'>
    </form>
    <a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>
</div>
</button>

js

jQuery(document).ready(function($) {
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
      });
    });

});

Answer 1

是否需要data-trigger="click" ？

如果你设置data-trigger至 focus ，您应该能够在点击远离它时关闭弹出窗口而无需任何额外的 javascript(除非您正在寻找不同的行为)。

Bootstrap documentation: Dismissible popover

编辑:

您的评论:

“尝试使用 data-trigger="focus"它会破坏移动浏览器(尤其是 iOS)的功能。”

您正在使用 button弹出框触发器的元素。这是文档中的内容:

Specific markup required for dismiss-on-next-click For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes.