如何在移动设备上禁用Bootstrap中的弹出框？

Question

我遇到了一个重要的Bootstrap Popover问题，在桌面端工作正常，但在移动设备上不行。当我点击带有Popover的按钮时，第一次会打开工具提示并在第二次点击时触发事件。

简言之：在移动设备上Bootstrap Popover无法在一次点击中触发事件，而是显示工具提示。

我想在移动设备上禁用它，或者在工具提示中触发事件。

让我展示代码：

HTML

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content" class="">Hover over me</a>
</div>

JavaScript

$('[data-toggle="popover"]').popover();   
    $('[data-toggle="popover"]').click(function(){
        alert("I am clicked");
})

我尝试过的方法

var win = $(window).width();
   if(win<767) {
      $('[data-toggle="popover"]').removeAttr('data-toggle');
      // Or something like this disable popover
      $('[data-toggle="popover"]').popoverDisabled();
    }

那么，有没有任何函数或属性可以解决这个问题？任何帮助/建议将不胜感激。

- Hidayt Rahman

---

不要试图在移动设备上禁用浮出层，应该将浮出层代码包含在一个if语句中，例如if (!mobile) { ...code }。 - Binar Web

Answer 1

这个可以正常工作：$('.className').popover('disable');

如果只想在移动设备上使用，可以这样：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $('.className').popover('disable');
}

- nssnl

Answer 2

首先检查移动版本，运行此函数：

detectmob();
function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     $('[data-toggle="popover"]').popover("hide");
   } else {
     return false;
   }
}

- Gaurav verma

---

不，这个不起作用。请问 popover("hide") 是做什么的？ - Hidayt Rahman

请参考以下内容：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_popover_methods&stacked=h - Gaurav verma

我尝试了 $("[data-toggle='popover']").popover('destroy'); 但是没有起作用。 - Hidayt Rahman