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

效果:

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

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

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

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

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

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

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

这就需要addEventListener()方法了

先看方法介绍:

element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

也就是该方法放在某个对象后可以给该对象添加事件

我们需要监听全页面的单击事件,所以我们的对象是document

document.addEventListener("click",clickHidden);

后一个参数是函数名, 本例函数如下:

(函数名不能带()传参,详情请看我的另一篇博客:https://blog.csdn.net/q5706503/article/details/82989804)

function clickHidden(eve)
{
    if( eve.target.id!="div_new"  &&  eve.target.tagName!='LI' )
		ulNew.style.display="none";
}

可以看到明明函数名没有参数, 定义的函数时却有参数

相信大家可以猜到,addEventListener会默认给函数传进一个参数

这个参数就是触发的click事件对象,该对象有一个target属性,属性值就是触发对象的元素

所以我们通过eve.target.id可以获得触发对象的id (同理可以获得标签内容和class等任何对象信息)

以此判断触发的对象是不是菜单栏,如果不是就不显示菜单栏(ulNew.style.display="none";)

大家可能还会疑问,为什么if里有两个判断?

这个其实是为了让本例页面的体验好一点,

一个条件判断的是点击的是不是菜单栏

另一个判断点击的是不是按钮,

否则点击按钮本来的让菜单显示的函数刚执行, 就被这个函数判断为true执行隐藏指令导致菜单都出不来了

当然也可以不加菜单栏的判断, 点击选项菜单消失也是常用的效果

还有一个坑:

我的菜单是ul而菜单选项是li ,

开始时我的判定条件是判定点击的是不是菜单(ul)

后来我发现死活都触发不了,最后弹窗输出点击对象的信息发现点击的是菜单项(li)不是菜单(ul)

也就是说要考虑到元素的层次问题, 触发点击的是上层的子元素, 是点不到下层的元素的

有可能某个透明的div覆盖在你的按钮上你点击按钮死活都触发不了按钮事件

这时候就要用弹窗或者控制台输出触发对象的信息来看看我们到底点的是什么元素