Question

好的，所以我做了下拉菜单，我希望每当用户点击body的任何地方时关闭它。为此我需要将一些java Script代码附加到body标签。我是JavaScript的新手，我不知道如何做到这一点。这甚至可能吗？

顺便说一下，我找到了用Jquery做这个的方法，但我不想用它。

也给我一个例子非常有用。

感谢。

（忽略）

<script>
function show_menu(){
    var menu = document.getElementById('dropdown_menu');

    if(menu.style.display == 'block'){
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';                    
    }
}
</script>

Answer 1

addEventListener是每个元素的一个方法（在其他一些事情中），是在“某事”发生时使函数运行的标准方法。

在body元素上调用它，告诉它你想要做什么样的事件以及你想要运行什么函数。

document.body.addEventListener('click', show_menu);

Answer 2

这是基本想法。如果用户单击文档，则隐藏菜单，但如果事件目标是容器，则停止事件冒泡。此外，如果单击菜单，请显示下拉菜单。

var menu = document.getElementById('container'), list = document.getElementById('dropdown_menu');

document.addEventListener('click', function(){
    list.style.display = 'none'; 
});
menu.addEventListener('click', function(e){
    list.style.display = 'block';
    if(e && e.stopPropagation){ e.stopPropagation(); }
    else {
        e = window.event;
        e.cancelBubble = true;
    }
});

JSFiddle

Answer 3

document.addEventListener('mousedown', show_menu);

将JavaScript附加到body标签

3 个答案: