js点击其他地方隐藏div

更新日期: 2020-09-30阅读: 2.9k标签: div

web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单,点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简单有效的方法仅供参考。

代码如下:

<script>
function getEl(obj){ return document.getElementById(obj) } getEl('dom').onclick=function(event){ //点击Id为dom的元素,让Id为con的元素显示
getEl('con').style.display='block';
stopBubble(event);
document.onclick=function(){//点击其他地方,Id为con的元素隐藏
getEl('con').style.display='none';
   document.onclick=null; 
}
}

getEl('con').onclick=function(event){
//只阻止了向上冒泡,而没有阻止向下捕获,所以点击con的内部对象时,仍然可以执行这个函数
stopBubble(event);
}
//阻止冒泡函数
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation(); //w3c
}else{
window.event.cancelBubble=true; //IE
}
}
</script>

实现也很简单,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了。  



 

链接: https://fly63.com/article/detial/9691

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!