前端----addEventListener实现点击菜单外收起菜单功能

效果:

点击按钮菜单出现:                                    点击菜单外则收起菜单:

这里主要介绍怎么收起菜单, 打开菜单相信大家都会(给按钮添加单击事件)

 

点击菜单外收起菜单需要添加单击事件来控制菜单的display="none";达到隐藏效果

但难就难在没有现成的事件判定点击发生在元素外

我们需要用排除法控制,也就是监听所有的点击事件,

在函数内部判断触发对象如果不是菜单则执行隐藏指令

那么怎么监听页面所有的点击对象呢?

这就需要addEventListener()方法了

先看方法介绍:

语法

element.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。