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

我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。

jQuery是否可以实现这样的功能？

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

当前回答

我很惊讶没有人真正承认这一事件：

var button=document.getElementById（'button'）；button.addEventListener（'click'，函数（e）{e.target.style.backgroundColor=“绿色”；});button.addEventListener（'焦点'，函数（e）{e.target.style.backgroundColor=''；});<!DOCTYPE html><html><head><meta charset=“utf-8”></head><body><button id=“button”>单击</button></body></html>

2018-02-12 10:39:21

其他回答

这对我来说非常有效！！

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

2012-06-04 14:08:27

我只是想让@Pistos的回答更加明显，因为它隐藏在评论中。

这个解决方案非常适合我

var elementToToggle = $('.some-element');
$(document).click( function(event) {
  if( $(event.target).closest(elementToToggle).length === 0 ) {
    elementToToggle.hide();
  }
});

在CoffeeScript中：

elementToToggle = $('.some-element')
$(document).click (event) ->
  if $(event.target).closest(elementToToggle).length == 0
    elementToToggle.hide()

2018-03-07 08:49:30

const button=document.querySelector（'button'）const box=document.querySelector（'.box'）；常量切换=事件=>{event.stopPropagation（）；if（！event.target.closest（'.box'））{console.log（'单击外部'）；box.classList.tggle（“活动”）；box.classList.contains（'active'）? document.addEventListener（'click'，切换）：document.removeEventListener（“单击”，切换）；}其他{console.log（'单击内部'）；}}button.addEventListener（'单击'，切换）；.box格式{位置：绝对；显示：无；页边空白：8px；填充：20px；背景：浅灰色；}.box激活{显示：块；}＜button＞切换框</button＞<div class=“box”><form action=“”><input-type=“text”><button type=“button”>搜索</button></form></div>

2019-12-27 18:25:13

所有这些答案都解决了这个问题，但我想提供一个完全符合需要的moders es6解决方案。我只是希望让大家对这个可运行的演示感到满意。

window.clickOutSide=（元素，单击外部，单击内部）=>{document.addEventListener（'click'，（event）=>{if（！element.contains（event.target））{if（单击类型内部==“函数”）{单击外侧（）；}}其他{if（单击类型内部==“函数”）{单击内侧（）；}}});};window.clickOutSide（document.querySelector（'.block'），（）=>警报（'clicked outside'）；.块{宽度：400px；高度：400px；背景色：红色；}<div class=“block”></div>

2020-09-28 13:53:11

试试这个：

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

https://jsfiddle.net/4cj4jxy0/

但请注意，如果单击事件无法到达html标记，则这将无法工作。（可能其他元素已停止传播（））。

2016-03-07 14:37:05

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

推荐文章

最新文章

标签