前兩天接手了同事的一個項目,是一個網站首頁,其中有段代碼很累贅,要實現的功能就是,
通過給父元素添加鼠標移入移出事件,來控制子元素顯示隱藏。
html代碼,一共有四個父元素div,每個父元素嵌套一個子元素div,
這是截取了其中一個div:
最簡單粗暴的方法莫過於這樣:
直接寫八個方法,分別設置屬性的樣式block或者none。
這樣寫雖然簡單,但是出於代碼優化,頁面響應速度的關系,我們還是需要改動的。
問了問同事,說看看有關事件委托的相關方法,能有效解決這個問題。
經過一頓操作之后,樓主寫出了如下代碼:
注:ev.srcElement是IE中的用法,target是非IE中的用法。
也可以這么用 obj = ev.srcElement ? ev.srcElement : ev.target;
這么寫能實現效果了,可是在查看控制台的時候竟然一片飄紅。
實在是頭痛啊,看到這個。明明效果實現了,為什么還報錯呢?
今天中午午休的時候,趴着想了想,突然就來了靈感。
這是修改之后的代碼。看完你就明白,這是因為target指代的是當前對象,
當鼠標移到父元素div時,子元素div屬性變為block,會顯示出來。
但是當你移動到子元素div上時,target就指向了子元素,而子元素沒有firstElementChild,所以會報錯。
這時我們只需加個判斷,如果子對象不存在,那么就修改當前對象的屬性。
否則,也就是子對象存在的情況,那就修改子對象屬性。
經過了兩天的折騰,終於優化了這么一小段代碼。
本來是想到的for循環,但是這樣循環下來,dom操作還是很多。
感謝給我提醒事件委托的那位朋友,以上代碼有不足之處歡迎指教。
剛參加工作,還有很多學習的地方,歡迎大家提出批評建議。