Bootstrap Popover Dismiss on Click: Works fine in desktop browser but not in mobile browser

问题

So I have a web app that runs on nodeJS and uses bootstrap for the front-end. I have integrated some bootstrap popovers and they do the following:

1. When the user clicks or taps on an image, it will bring up the popover.
2. The user can click anywhere and it will dismiss the popover.

They work fine when I open the app from a desktop or laptop browser, but when I open the app(using computer's IP address) on a mobile browser(safari on iPhone), the popovers do not dismiss on click. What's the problem here? Am I missing anything? Here's the code:

<img src='/images/question.png' tabindex="0" role="button" data-trigger="focus" height="10" width="10" data-toggle="popover" title="Daily Hub Activity" data-content="Lorem ipsum blablabla." animation="true" data-placement="bottom">

回答1:

I believe iOS does not bind click events to html or body. Give something like this a try (Close a Twitter Bootstrap Popover when Clicking Outside):

$('[data-toggle="popover"]').popover();

$('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');
        }
    });
});

Hope this helps.

来源：https://stackoverflow.com/questions/30626171/bootstrap-popover-dismiss-on-click-works-fine-in-desktop-browser-but-not-in-mob