摘要：自定義多級(jí)右鍵菜單實(shí)現(xiàn)效果自定義多級(jí)右鍵菜單第五課第六題中已經(jīng)通過(guò)事件實(shí)現(xiàn)了一級(jí)右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。

實(shí)現(xiàn)效果：
6-01完美拖動(dòng)

這里沒(méi)有使用h5的拖動(dòng)，畢竟原題也是考察借助鼠標(biāo)事件實(shí)現(xiàn)自定義的拖動(dòng)，所以就借鑒了《js高級(jí)程序設(shè)計(jì)》里的自定義拖動(dòng)自己封裝了個(gè)拖動(dòng)api，當(dāng)然由于做這個(gè)系列題目使用的都是es5的語(yǔ)法，所以IE8往下就兼容不到了（有興趣的可以自己一試）。

首先有一個(gè)自定義的事件對(duì)象構(gòu)造函數(shù)EventTarget，內(nèi)部封裝了事件的監(jiān)聽、觸發(fā)、移除監(jiān)聽三個(gè)基本操作。再由EventTarget拓展一個(gè)和拖動(dòng)操作有關(guān)的單例對(duì)象，這個(gè)對(duì)象是的主要任務(wù)就是把指定元素上的觸發(fā)的鼠標(biāo)事件轉(zhuǎn)換為觸發(fā)我們自定義的拖動(dòng)事件，該對(duì)象接口方法介紹如下：

enable()：開啟整個(gè)文檔上拖動(dòng)事件與鼠標(biāo)事件的關(guān)聯(lián)

disable()：關(guān)閉拖動(dòng)事件與鼠標(biāo)事件的關(guān)聯(lián)，也就是點(diǎn)擊時(shí)不再觸發(fā)自定義的拖動(dòng)操作

addHandler(eventName, handler)：給相應(yīng)拖動(dòng)事件添加處理函數(shù)。注意由于拖動(dòng)事件是全局關(guān)聯(lián)，所以若處理函數(shù)是針對(duì)指定元素的操作，不僅要先在該元素上添加class="draggable"，而且在處理函數(shù)里還要判斷觸發(fā)事件的就是該元素才行

removeHandler(eventName, handler)：移除指定的拖動(dòng)事件上的某個(gè)處理函數(shù)

再介紹下三個(gè)自定義的拖動(dòng)事件：

dragstart：由mousedown轉(zhuǎn)換而來(lái)，事件對(duì)象的屬性有：

type: "dragstart"

target: 鼠標(biāo)點(diǎn)擊的draggable元素

clientX, clientY: 同mousedown

drag：由mousemove轉(zhuǎn)換而來(lái)，事件對(duì)象的屬性有：

type: "drag"

target: 鼠標(biāo)點(diǎn)擊的draggable元素

clientX, clientY: 同mousemove

diffX, diffY: 用于校正clientX, clientY與實(shí)際要達(dá)到的拖動(dòng)位置的偏差。需在dragstart做指定，否則默認(rèn)值為0

dragend：由mouseup轉(zhuǎn)換而來(lái)，事件對(duì)象的屬性有：

type: "dragend"

target: 鼠標(biāo)點(diǎn)擊的draggable元素

clientX, clientY: 同mouseup

api有了，我們就可以調(diào)用enable開啟拖動(dòng)，再和原生的事件一樣給題目中的拖動(dòng)塊添加三個(gè)事件處理函數(shù)即可。只是要注意由于addHandler方法不能指定元素，所以還得在拖動(dòng)塊上添加class="draggable"、并在處理函數(shù)里做個(gè)判斷才行。利器在手，接下來(lái)要做的限制移動(dòng)范圍、展示坐標(biāo)、回放拖動(dòng)等都是小case啦，這題的代碼就當(dāng)是這套api的示例了。

實(shí)現(xiàn)效果:
6-02仿騰訊微博效果

這次來(lái)個(gè)大制作，只要再搭個(gè)后臺(tái)弄點(diǎn)數(shù)據(jù)交互，幾乎就是一個(gè)完整的webApp了。就頁(yè)面而言，主要就是實(shí)現(xiàn)表單獲取數(shù)據(jù)和數(shù)據(jù)列表的展現(xiàn)，所以這里分別封裝了兩個(gè)單例MsgForm和MsgList對(duì)應(yīng)表單和展示列表，來(lái)實(shí)現(xiàn)相關(guān)的功能。

MsgForm只提供了init方法來(lái)添加各個(gè)表單組件的事件監(jiān)聽。該部件最重要的就是對(duì)表單的驗(yàn)證了，既要有提交時(shí)的驗(yàn)證，也要保證能在輸入時(shí)即時(shí)給出字?jǐn)?shù)提醒。正則用的溜的話其實(shí)也不難。

至于MsgList則主要實(shí)現(xiàn)增刪DOM的操作，難點(diǎn)就是呈現(xiàn)和隱藏兩個(gè)動(dòng)畫的實(shí)現(xiàn)。這里利用setTimeout手動(dòng)調(diào)節(jié)出了效果，寫得還是比較ugly的，拓展性還不強(qiáng)。

最后注意幾個(gè)語(yǔ)法上的問(wèn)題，一是鍵盤事件也是可以使用輔助按鍵屬性：ctrlKey, altKey, shiftKey, metaKey，而不用像第五課做過(guò)的一題那樣去緩存按鍵了。第二就是用js獲取的css屬性值，不論是通過(guò)element.style還是window.getComputedStyle()，返回的都是字符串，所以要進(jìn)行運(yùn)算只能手動(dòng)轉(zhuǎn)為數(shù)字；這一點(diǎn)和js中獲取寬高、位置的屬性如offsetWidth等直接返回?cái)?shù)字不同。

實(shí)現(xiàn)效果：
6-03自定義多級(jí)右鍵菜單

第五課第六題中已經(jīng)通過(guò)contextmenu事件實(shí)現(xiàn)了一級(jí)右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。

首先解決第五課第六題題在實(shí)現(xiàn)時(shí)留下的一個(gè)bug：菜單有時(shí)會(huì)顯示到容器外。原因很簡(jiǎn)單，由于是先定位菜單再顯示菜單，導(dǎo)致要依靠寬高的定位并不能起作用；所以這里保證菜單先顯現(xiàn)出來(lái)?yè)碛袑捀呒纯伞?/p>

然后就是實(shí)現(xiàn)多級(jí)子菜單了，這里直接使用css的hover偽類控制顯隱，只把定位交給mouseover事件來(lái)做即可。因?yàn)槿绻褂?b>mouseover和mouseout控制顯隱，由于冒泡的特性會(huì)導(dǎo)致移到子菜單前父菜單就已經(jīng)消失的問(wèn)題，雖然前面做過(guò)的題目有用過(guò)setTimeout延遲消失來(lái)解決這一問(wèn)題的，但這樣寫起來(lái)實(shí)在太丑陋了，不考慮兼容老舊瀏覽器情況下還是用css做更清晰高效。

至于如何定位，也是沿用第五課的思路：設(shè)置各級(jí)子菜單絕對(duì)定位；顯示菜單時(shí)先計(jì)算容器右側(cè)和底部的剩余空間；再分別判斷能否容得下子菜單的寬高，若容得下則子菜單出現(xiàn)在父元素右下角，否則就做出相應(yīng)的變化。

最后再總結(jié)遇到的幾個(gè)問(wèn)題：

子菜單定位時(shí)遇到的問(wèn)題：js的offsetTop, offsetLeft屬性獲得的都是相對(duì)父容器的位置而不是絕對(duì)位置，要獲取絕對(duì)位置必須進(jìn)行向上遍歷。

子菜單li元素的寬度不能容得下其文本內(nèi)容，導(dǎo)致文本折疊：不設(shè)置寬度的絕對(duì)定位元素，其寬度是由最長(zhǎng)的文本內(nèi)容決定的。若文本自動(dòng)換行那最長(zhǎng)文本就是最長(zhǎng)單詞而已，所以得設(shè)置white-space: nowrap;使文本不換行，才能保證li元素的寬度能夠容得下其所有文本內(nèi)容。而具體關(guān)于元素寬高為auto時(shí)其寬高在不同情況會(huì)受到什么影響，我會(huì)專門寫一篇文章來(lái)分析分析~

---第六課完---