html中鼠标离开二级菜单马上消失,【前端】跪求大神:鼠标点击菜单以外的地方 使下拉菜单消失...

例如:

百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？

回答

简单方法，控制事件冒泡：

显示菜单

• 菜单一
• 菜单二
• 菜单三

//点击“显示菜单”按钮时，显示菜单，并阻止事件冒泡

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);

获得焦点和失去焦点

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上绑定太多事件会影响效率。