javascript - 在一个元素之外发生点击事件然后隐藏一个下拉菜单该怎么做？

Question

不是mouseout这样的事件，是在一个元素之外发生点击事件，然后隐藏元素内的一个下拉菜单，效果就类似于segmentfault在添加标签时，会出来一个提示的下拉菜单，然后在菜单之外点击就隐藏菜单，不知道应该怎样绑定事件呢？

Answer 1

用$element来表示你要隐藏的下拉菜单即$element = $('.need-hidden-element')
你添加下面的代码

$(document)
    .on('click', function(){
        $element.hide();
    })
    .on('click', '.need-hidden-element', function(event){
        event.stopPropagation();
    })

Answer 2

需要将屏幕缩小：代码：响应式菜单制作
这个或许对你也有用：CSS3模拟侧滑菜单
一篇教程：响应式下的下拉菜单

Answer 3

if加入你的判断

window.onclick = function(e){
        e = e || window.event;
        var t = e.target || e.srcElement;
        if(t...){
            下拉菜单.style.display = "none"
        }
    }

Answer 4

jq有个方法：trigger()

$('.p').click(function(){
    $('input').trigger('click');
});

做html5上传的时候用过这个方法，可惜不是原生js了，可以研究一下trigger()在jq里怎么作用的，

Answer 5

1. click 事件绑定到 ele 父元素（document.body）。
2. 判断事件 event.target 和 event.currentTarget 是否相等。
3. 如果相等，则是在 ele 元素之外(document.body) 触发，隐藏下拉菜单，不等则是 ele 元素触发。

Answer 6

给document绑定点击事件，直接隐藏菜单