Bootstrap3 Popover优化：点击内容不关闭且保留focus触发

我之前也碰到过这个头疼的问题——用focus触发的Bootstrap 3 Popover，一点击内部的输入框或按钮就会意外关闭，但又不想丢掉点击页面其他区域自动关闭的便捷性。其实通过阻止事件冒泡就能完美解决，具体操作如下：

步骤1：调整HTML结构，给内部内容加统一标识 #

先给Popover的内部内容套一个容器，并添加专属类（比如popover-inner-content），方便后续精准定位元素：

<div data-toggle="popover" 
     data-content='<div class="popover-inner-content"><input type="text" class="form-control"><button class="btn btn-sm btn-default" style="margin-top:5px">Zapisz</button></div>' 
     data-title="Description" 
     data-html="true" 
     data-trigger="focus" 
     data-container="body">
  点击打开Popover
</div>

步骤2：添加JavaScript事件处理逻辑 #

借助jQuery（Bootstrap 3依赖jQuery）监听内部内容的点击事件，阻止事件向上冒泡到document节点，这样就不会触发Popover的关闭逻辑：

// 初始化所有Popover
$('[data-toggle="popover"]').popover();

// 阻止内部内容的点击事件冒泡，避免触发关闭
$(document).on('click', '.popover-inner-content', function(e) {
  e.stopPropagation();
});

原理说明 #

Bootstrap中focus触发的Popover，关闭逻辑是通过监听document的点击事件来判断触发元素是否失去焦点。当我们点击内部内容时，e.stopPropagation()会阻止事件传递到上层的document，因此不会触发关闭；而点击页面其他区域时，Popover的触发元素会正常失去焦点，依然能自动关闭，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Martin