如何检测元素外部的单击？

这里的其他解决方案对我不起作用,所以我不得不使用:

if(!$(event.target).is('#foo'))
{
    // hide menu
}

我有一个与Eran的例子类似的应用程序,除了我打开菜单时将click事件附加到正文...有点像这样:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

有关jQuery 功能的更多信息one()

经过研究,我找到了三种工作方案(我忘了页面链接供参考)

第一解决方案

二解决方案

第三种方案

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

对我来说就好了.

现在有一个插件:外部事件(博客文章)

将clickoutside处理程序(WLOG)绑定到元素时会发生以下情况:

该元素被添加到一个数组中,该数组包含clickoutside处理程序的所有元素

a(命名空间)单击处理程序绑定到文档(如果尚未存在)

对于文档中的任何单击,触发clickoutside事件,以便该数组中那些不等于或者是click -events目标的父元素的元素

另外,clickoutside事件的event.target 设置为用户点击的元素(这样你甚至可以知道用户点击了什么,而不仅仅是他点击了外面)

因此,没有事件停止传播,并且可以在具有外部处理程序的元素"上方"使用其他点击处理程序.

这完全适合我!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});

我不认为你真正需要的是当用户点击外面时关闭菜单; 您需要的是当用户点击页面上的任何位置时关闭菜单.如果您单击菜单,或关闭菜单,它应该关闭吗？

上面没有找到满意的答案促使我前几天写这篇博文.对于更迂腐的人来说,有许多值得注意的问题:

如果在单击时将click事件处理程序附加到body元素,请确保在关闭菜单之前等待第二次单击,并取消绑定事件.否则,打开菜单的单击事件将冒泡到必须关闭菜单的侦听器.

如果对click事件使用event.stopPropogation(),则页面中没有其他元素可以具有click-anywhere-to-close功能.

将click事件处理程序无限期地附加到body元素不是一个高性能的解决方案

将事件的目标及其父项与处理程序的创建者进行比较假定您想要的是在单击它时关闭菜单,当您真正想要的是在单击页面上的任何位置时关闭它.

在body元素上侦听事件会使代码更加脆弱.造型像无辜一样会破坏它:body { margin-left:auto; margin-right: auto; width:960px;}

正如另一张海报所说,有很多陷阱,特别是如果您正在显示的元素(在这种情况下是一个菜单)具有交互元素.我发现以下方法相当健壮:

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

这种情况的简单解决方案是:

$(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});

上面的脚本将隐藏divif divclick事件的外部是否被触发.

您可以在以下博客中查看更多信息:http://www.codecanal.com/detect-click-outside-div-using-javascript/

解决方法1

而不是使用可能有一些副作用的event.stopPropagation(),只需定义一个简单的标志变量并添加一个if条件.我测试了这个并正常工作,没有任何副作用的stopPropagation:

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

溶液2

只需一个简单的if条件:

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

检查窗口单击事件目标(它应传播到窗口,只要它没有在其他任何地方捕获),并确保它不是任何菜单元素.如果不是,那么你就在菜单之外了.

或者检查点击的位置,看看它是否包含在菜单区域中.

我有这样的成功:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

逻辑是:当#menuscontainer显示时,将单击处理程序绑定到#menuscontainer仅在目标(单击)不是它的子项时隐藏的主体.

作为变种:

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

停止事件传播没有问题,并且更好地支持同一页面上的多个菜单,在第一个打开时单击第二个菜单将在stopPropagation解决方案中保留第一个菜单.

我在一些jQuery日历插件中找到了这个方法.

function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);

该事件有一个名为event.path的属性,该属性是"树中所有祖先的静态有序列表".要检查事件是源自特定DOM元素还是其中一个子元素,只需检查该特定DOM元素的路径.它还可以用于通过逻辑OR检查some函数中的元素检查来检查多个元素.

$("body").click(function() {
  target = document.getElementById("main");
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  })
  if (flag) {
    console.log("Inside")
  } else {
    console.log("Outside")
  }
});

#main {
  display: inline-block;
}

  

    
Test-Main
    
Test-Main
    
Test-Main
    
Test-Main
    
Test-Main
  


  Outside Main

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

Toggle Hidden Div
This content is normally hidden. click anywhere other than this content to make me disappear

var button = document.getElementById('button');
button.addEventListener('click', function(e){
  e.target.style.backgroundColor = 'green';
});
button.addEventListener('focusout', function(e){
  e.target.style.backgroundColor = '';
});

  


  Click

this.outsideElementClick = function(objEvent, objElement){   
var objCurrentElement = objEvent.target || objEvent.srcElement;
var blnInsideX = false;
var blnInsideY = false;

if (objCurrentElement.getBoundingClientRect().left >= objElement.getBoundingClientRect().left && objCurrentElement.getBoundingClientRect().right <= objElement.getBoundingClientRect().right)
    blnInsideX = true;

if (objCurrentElement.getBoundingClientRect().top >= objElement.getBoundingClientRect().top && objCurrentElement.getBoundingClientRect().bottom <= objElement.getBoundingClientRect().bottom)
    blnInsideY = true;

if (blnInsideX && blnInsideY)
    return false;
else
    return true;}

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

$(document).off("click.menu-outside");

$(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        // .closest can help you determine if the element 
        // or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

// Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
    if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
        overlay.hide();
    }
});

&& (e.target != $('html').get(0)) // ignore the scrollbar

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

window.addEventListener('mouseup', e => {
        if (e.target != yourDiv && e.target.parentNode != yourDiv) {
            yourDiv.classList.remove('show-menu');
            //or yourDiv.style.display = 'none';
        }
    })

window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
    yourDiv.classList.remove('show-menu'); 
    //or yourDiv.style.display = 'none';
}

var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
    if(!isMenuClick){
       //Hide the menu here
    }
    //Reset isMenuClick 
    isMenuClick = false;
})
menu.addEventListener('click',()=>{
    isMenuClick = true;
})

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

 Hello I am the title
I will hide when you click outside of me