切换常规和触摸设备

我在这里读了一些答案，并创建了一些代码，我使用div的函数作为弹出气泡。

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

您还可以使用类使其更加抽象，并根据触发单击事件的按钮选择正确的弹出气泡。

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

我觉得这样会容易得多。我是这样做的:

$(':not(.form_wrapper)').click(function() {
    $('.form_wrapper').hide();
});

这么多答案我都用不上。相反，我采取了公认的答案(工作得很好)，并缩短为以下(使用后代选择器):

$(document).mouseup(function(e) 
{
    if (!$(e.target).is("#targetSelector,#targetSelector *")) {
        $('#targetSelector').hide();
    }
});

因为它只以用户交互的速度运行，没有给变量赋值

为我工作在所有设备上(2023);)

<section class="form-wrapper">
 <div class="popup-container">
  Popup Me
 </div>
</section>



$('.form-wrapper').on('click', function(e) {
  var pop_container = $(".popup-container");

  // if the target of the click isn't the pop_container nor a descendant of the pop_container
  if (!pop_container.is(e.target) && pop_container.has(e.target).length === 0) {
      //you action here 
      pop_container.hide();
  }
});

根据文档，.blur()不仅仅适用于<input>标记。例如:

$('.form_wrapper').blur(function(){
   $(this).hide();
});

这个解决方案应该工作得很好，很简单:

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

在上面的代码更改donotcountmeforclickclass1, donotcountmeforclickclass2等类，你已经用来显示弹出或在它的点击弹出不应该影响，所以你必须明确添加类，你正在使用打开弹出。

用popup class更改.popup class。