当用户在其外部单击时,使用jQuery隐藏DIV

我正在使用此代码:

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

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

这个HTML:

   I Agree
   Disagree

问题是我在DIV内部有链接,当它们点击时它们不再有效.

有同样的问题,想出了这个简单的解决方案.它甚至可以递归工作:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

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

你最好选择这样的东西:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

此代码检测页面上的任何单击事件,然后#CONTAINER当且仅当单击的#CONTAINER元素既不是元素也不是其后代之一时隐藏元素.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

您可能希望检查为正文触发的单击事件的目标,而不是依赖于stopPropagation.

就像是:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

此外,主体元素可以不包括浏览器中所示的整个视觉空间.如果您注意到您的点击未注册,则可能需要添加HTML元素的点击处理程序.

现场演示

检查点击区域不在目标元素中或在其子元素中

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

更新:

jQuery停止传播是最好的解决方案

现场演示

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

将解决方案更新为:

改用mouseenter和mouseleave

悬停使用实时事件绑定

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

最流行的答案是没有jQuery的解决方案:

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN:https://developer.mozilla.org/en/docs/Web/API/Node/contains

具有ESC功能的现场演示

适用于桌面和移动设备

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{如果在某些情况下,您需要确保在单击文档时确实可以看到元素: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

不会像这样的工作吗？

$("body *").not(".form_wrapper").click(function() {

});

要么

$("body *:not(.form_wrapper)").click(function() {

});

您可以设置tabindex为父级

    I Agree
    Disagree

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

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

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

coco2冰冰

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1是否可以转储和恢复window.angular以创建可恢复的快照
• 2"在哪里"在nodejs中的MySQL查询
• 3在elixir中是否有相当于Haskell的init函数？
• 4AEM 6.1:在Touch UI上启用富文本编辑器(RTE)插件
• 5中心模式下的滑动轮播导致SlidesToscroll无法正常工作
• 6如何使用Node.js访问DOM？
• 7如何从Google Play商店获取应用市场版本信息？
• 8我的对aa的类型
• 9如何使用一个laravel安装来处理子域
• 10与'wss:// localhost:44300/Home/websocketcon'的WebSocket连接失败:WebSocket握手期间出错:意外响应代码:404
• 11左移不等于2乘以
• 12当我运行WPF MVVM应用程序时,会显示两个主窗口实例
• 13英特尔Broadwell处理器经历了显着的FMA性能异常
• 14为什么SQL在if exists结构的true部分中计算语句,即使`if exists`返回false？
• 15如何用按钮更改HTML范围滑块值？
• 16P/Invoke - 封送委托作为函数指针+ void*
• 17用手机控制的网站？
• 18通用方法处理IEnumerable与泛型类型不同
• 19理解JavaScript中的类关键字
• 20在数据库中的Yii2会话存储,行太多了？性能？