引导弹出窗口在 IE11 中不起作用答案

【问题标题】：bootstrap popover not working in IE11引导弹出窗口在 IE11 中不起作用
【发布时间】：2017-03-20 22:16:14
【问题描述】：

尝试在 svg 上显示引导弹出框。设法让它在 Safari 和 Firefox 中运行（尚未测试 Chrome）但无法让它在 IE 中运行 - 尝试过 IE11。

弹出框的关键在于它是在单击 svg 时触发的，然后通过单击弹出框标题中的 x 或屏幕上的任何其他位置来解除。

我已经设置了一个 jsfiddle 来显示我想要实现的目标。 IT 无法在 IE11 中运行。

<a id="testPopover" tabindex="0" class="popover_wrapper" data-toggle="popover" data-trigger="focus" data-container="body">
<svg width="310" height="110">
   <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg> 
</a>

https://jsfiddle.net/sregorcinimod/ut56eowb/

【问题讨论】：

可能是 IE 中 focus 的问题，我敢打赌它适用于 click？
但是点击会使标题中的 x 停止工作

标签： javascript twitter-bootstrap svg popover

【解决方案1】：

似乎使用 bootstrap v4 可以解决这个问题。正在进行进一步测试

【讨论】：

v3.37 中有一个修复程序解决了我的问题。现在使用 v4

【解决方案2】：

我会将触发器更改为click，然后将data-dismiss="#testPopover" 改为data-dismiss="#testPopover"，而不是data-dismiss="popover"，这样您就可以得到对具有弹出框的元素的引用，然后你可以这样做：

 $("body").on("click", ".popover .close", function(e) {
    e.preventDefault();
    $($(this).data('dismiss')).popover('hide');
 })

https://jsfiddle.net/ut56eowb/13/

【讨论】：

这无助于我需要“弹出框的关键是它是在单击 svg 时引发的，然后通过单击标题中的 x 将其关闭弹出窗口或屏幕上的任何其他位置。”。单击屏幕上的其他任何位置都不会执行任何操作。