跪求大神:鼠标点击菜单以外的地方 使下拉菜单消失

7542
  • 233

例如:

百度,google上面的链接,点击链接之后,出现下拉菜单,鼠标离开不消失,鼠标点击菜单以外的地方,才会使下拉菜单消失。这样的功能怎么实现?谁能给个类似的代码参考一下?
回复
阅读 11.1k
7 个回答
✓ 已被采纳

简单方法,控制事件冒泡:

<button class="showBtn">显示菜单</button>
<!-- 菜单默认不显示 -->
<div class="menu">
  <ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
  </ul>
</div>
//点击“显示菜单”按钮时,显示菜单,并阻止事件冒泡
document
.querySelector('.showBtn')
.addEventListener('click', function(e){
    document.querySelector('.menu').classList.add('show');
    e.stopPropagation();//关键在于阻止冒泡
}, false);

//点击“菜单”内部时,阻止事件冒泡。(这样点击内部时,菜单不会关闭)
document
.querySelector('.menu')
.addEventListener('click', function(e){
    e.stopPropagation();
}, false);

//监听整个document的点击事件,如果能收到事件(说明点击源既不是“显示菜单”按钮,也不来自菜单内部),就可以放心关闭菜单了
document
.addEventListener('click', function(){
    document.querySelector('.menu').classList.remove('show');
}, false);

demo在这:jsfiddle

获得焦点和失去焦点

document.addEventListener('click',function( e ){
  var aa = document.getElementById('aa')

  if( e.target !== aa ){
    aa.style.display = "none";
  }
},false)
document.onclick = function() {
    div.style.display = 'none';
}

可以利用js事件的冒泡机制来实现这个效果
假设下拉菜单这个盒子的 id=“drop-down”

var dropDownEle = document.getElementById("drop-down");
var Btn = document.getElementById('btn');
/* 点击按钮时,显示下拉菜单 */
Btn.onclick = function(ev){
    var ev = ev || event;
    ev.stopPropagation();//阻止事件冒泡
    dropDownEle.style.display = 'block';
}
dropDownEle.onclick = function(ev){
    var ev = ev || event;
    ev.stopPropagation();//阻止事件冒泡
}
/* 点击非按钮的任意地方,隐藏下拉菜单 */
document.onclick = function(){
    dropDownEle.style.display = 'none';
}

提供了思路,仅供参考!

方案一:下拉菜单出现后在菜单下添加一个全屏大小的透明遮罩层,点击遮罩层菜单消失,缺点,因为遮罩层遮挡,遮罩层下面的交互如hover等将会失效,而且click需要点击一下隐藏遮罩层,再点第二下才会生效。而且scroll滚动也会失效。
方案二:事件绑定到document上

document.on('click',function(evt){
    if (!$(evt.target).closest('.someClass').length) { //someClass是菜单栏的class
        // 隐藏菜单栏
    }
})

缺点,document上绑定太多事件会影响效率。

宣传栏