引导弹出窗口不会在移动设备中关闭答案

【问题标题】：bootstrap popover wont close in mobile引导弹出窗口不会在移动设备中关闭
【发布时间】：2015-06-14 11:49:23
【问题描述】：

我已将我的 html 简化为我在此处发布的代码。首先，我有一个空的 p-tag。然后是一个包含弹出框锚的表格标签。然后是另一个空的 p-tag。当我在桌面上时，单击锚点并显示弹出窗口后，无论我在页面上单击何处，都会关闭弹出窗口。但是，当我在移动设备（Safari iOS）上时，只有在我单击/点击页面末尾时，弹出框才会关闭。这意味着，最后一个空 p-tag 之后的区域。我研究了很多。我不确定，但也许可能是关于听“点击”而不是“点击”？我真正不明白的是为什么在正文中单击外部标签会使弹出框消失。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="/components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
<script type="text/javascript" src="/components/jquery/dist/jquery.js">     </script>    
<script type="text/javascript" src="/components/bootstrap/dist/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]')
.on('click',function(e){
e.preventDefault();
})
.popover();
})
</script>
</head>
<body> 
<p style="background-color:green">&nbsp;</p>
<table border=1 cellspacing=2  cellpadding=2 >
    <tr>
       <td><b>Lowest</b></td>
    </tr>
    <tr>
       <td>
            <a 
                data-html="true"  data-trigger="focus" tabindex="0" role="button" href="#" data-toggle="popover" data-placement="right" 
                data-content="<div>This is HTML</div>">
                    one
            </a>
       </td>
   </tr>
</table>
<p style="background-color:yellow">&nbsp;</p>
</body>
</html>

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

问题是在 Iphone onclick 上的 body 元素不起作用。尝试编写一个简单的 html 页面，其中包含以下代码： $（函数（）{ $('body').on('点击 touchstart', function (e) { 警报（“点击”）； }); }); 好吧，在 Iphone 上不会有任何警报。所以专注于这一点，我发现有一些解决方法。一种解决方法是在您希望可单击的元素上设置一个 css 指令（在我的情况下是所有正文标记，因此在该 cse 中您可能需要放置一些包含所有正文内容的包装器）。该指令很简单：光标：指针；

由于您可能不希望所有元素都显示指针，因此您可能需要检测客户端是否为 iOS。

【讨论】：

其实可以把cursor:pointer放在body里面。经过测试，它可以工作。触摸页面上的某个位置时，弹出框会消失。