iPhone端Bootstrap Popover点击外部无法关闭的解决方案求助

嘿，我太懂你这个困扰了——iOS Safari的点击事件处理确实和桌面端不一样，这就是导致你的代码在iPhone上失效的核心原因。下面给你几个可行的解决方案，你可以根据自己的场景挑选：

方案1：快速修复——让body成为可点击元素 #

iOS Safari默认不会给非可点击元素（比如body这类默认无交互的容器）触发click事件，除非它被标记为“可交互”。给body加个简单的CSS样式就能解决：

body {
    cursor: pointer;
}

这个方案优点是改动极小，缺点是可能会影响页面其他元素的光标样式，你可以根据情况调整范围（比如给特定容器加而不是全局body）。

方案2：兼容触摸与点击——监听多事件类型 #

直接把你的事件监听改成同时支持click和touchstart，覆盖移动端触摸和桌面端点击的场景：

$('body').on('click touchstart', function(e) {
    $('[data-toggle=popover]').each(function() {
        // 点击/触摸外部区域时关闭所有弹出的popover
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

这样不管是在iPhone上触摸空白区域，还是在桌面端点击空白区域，都能触发关闭逻辑，兼容性拉满。

方案3：原生Bootstrap用法（推荐，如果你用的是Bootstrap） #

如果你的popover是基于Bootstrap实现的，其实可以直接用它自带的data-trigger="focus"属性，这样点击外部或者按ESC键都会自动关闭popover。不过要注意，触发popover的元素需要是可聚焦的，所以要给它加tabindex="-1"：

<!-- 示例按钮 -->
<button type="button" data-toggle="popover" data-trigger="focus" tabindex="-1" 
        title="Popover标题" data-content="这里是Popover内容">点击打开Popover</button>

这个方案最符合Bootstrap的设计理念，不需要额外写太多JS代码，维护起来更省心。

你可以先试试方案2或者3，应该能完美解决iPhone上的问题～

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