效果:

點選按鈕選單出現:                                    點選選單外則收起選單:

這裡主要介紹怎麼收起選單, 開啟選單相信大家都會(給按鈕新增單擊事件)

點選選單外收起選單需要新增單擊事件來控制選單的display="none";達到隱藏效果

但難就難在沒有現成的事件判定點擊發生在元素外

我們需要用排除法控制,也就是監聽所有的點選事件,

在函式內部判斷觸發物件如果不是選單則執行隱藏指令

那麼怎麼監聽頁面所有的點選物件呢?

這就需要addEventListener()方法了

先看方法介紹:

語法

element.addEventListener(event, function, useCapture)

引數值

 也就是該方法放在某個物件後可以給該物件新增事件

我們需要監聽全頁面的單擊事件,所以我們的物件是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覆蓋在你的按鈕上你點選按鈕死活都觸發不了按鈕事件

這時候就要用彈窗或者控制檯輸出觸發物件的資訊來看看我們到底點的是什麼元素