原生js練習題 第六課

2021-09-19 09:39:20 字數 1870 閱讀 8184

實現效果:

6-01完美拖動

這裡沒有使用h5的拖動,畢竟原題也是考察借助滑鼠事件實現自定義的拖動,所以就借鑑了《js高階程式設計》裡的自定義拖動自己封裝了個拖動api,當然由於做這個系列題目使用的都是es5的語法,所以ie8往下就相容不到了(有興趣的可以自己一試)。

首先有乙個自定義的事件物件建構函式eventtarget,內部封裝了事件的監聽、觸發、移除監聽三個基本操作。再由eventtarget拓展乙個和拖動操作有關的單例物件,這個物件是的主要任務就是把指定元素上的觸發的滑鼠事件轉換為觸發我們自定義的拖動事件,該物件介面方法介紹如下:

再介紹下三個自定義的拖動事件:

drag:由mousemove轉換而來,事件物件的屬性有:

dragend:由mouseup轉換而來,事件物件的屬性有:

api有了,我們就可以呼叫enable開啟拖動,再和原生的事件一樣給題目中的拖動塊新增三個事件處理函式即可。只是要注意由於addhandler方法不能指定元素,所以還得在拖動塊上新增class="draggable"、並在處理函式裡做個判斷才行。利器在手,接下來要做的限制移動範圍、展示座標、回放拖動等都是小case啦,這題的**就當是這套api的示例了。

msgform只提供了init方法來新增各個表單元件的事件監聽。該部件最重要的就是對表單的驗證了,既要有提交時的驗證,也要保證能在輸入時即時給出字數提醒。正則用的溜的話其實也不難。

至於msglist則主要實現增刪dom的操作,難點就是呈現和隱藏兩個動畫的實現。這裡利用settimeout手動調節出了效果,寫得還是比較ugly的,拓展性還不強。

最後注意幾個語法上的問題,一是鍵盤事件也是可以使用輔助按鍵屬性:ctrlkey,altkey,shiftkey,metakey,而不用像第五課做過的一題那樣去快取按鍵了。第二就是用js獲取的css屬性值,不論是通過element.style還是window.getcomputedstyle(),返回的都是字串,所以要進行運算只能手動轉為數字;這一點和js中獲取寬高、位置的屬性如offsetwidth等直接返回數字不同。

實現效果:

6-03自定義多級右鍵選單

第五課第六題中已經通過contextmenu事件實現了一級右鍵選單,所以這題只要在上面再新增事件喚出子選單即可。

首先解決第五課第六題題在實現時留下的乙個bug:選單有時會顯示到容器外。原因很簡單,由於是先定位選單再顯示選單,導致要依靠寬高的定位並不能起作用;所以這裡保證選單先顯現出來擁有寬高即可。

然後就是實現多級子選單了,這裡直接使用css的hover偽類控制顯隱,只把定位交給mouseover事件來做即可。因為如果使用mouseovermouseout控制顯隱,由於冒泡的特性會導致移到子選單前父選單就已經消失的問題,雖然前面做過的題目有用過settimeout延遲消失來解決這一問題的,但這樣寫起來實在太醜陋了,不考慮相容老舊瀏覽器情況下還是用css做更清晰高效。

至於如何定位,也是沿用第五課的思路:設定各級子選單絕對定位;顯示選單時先計算容器右側和底部的剩餘空間;再分別判斷能否容得下子選單的寬高,若容得下則子選單出現在父元素右下角,否則就做出相應的變化。

最後再總結遇到的幾個問題:

---第六課完---

第六課 字型

a.字型系列 font family times new roman times,serif b.字型樣式 font style normal 正常 正常顯示文字 font style italic 斜體 以斜體字顯示的文字 font style oblique 傾斜的文字 文字向一邊傾斜 和斜體非...

第六課 列表

序列是python中最基本的 種資料結構。序列 於儲存 組有序的資料,所有的資料在序列當中都有 個唯 的位置 索引 並且序列中的資料會按照新增的順序來分配索引。資料結構指計算機中資料儲存的 式。python 基礎教程 第二版 對序列的定義為 資料結構。資料結構是通過某種方式 例如對元素進行編號 組織...

第六課 文法

1.名詞 動詞 他動詞 用助詞 表示他動詞的直接受詞。飲 我喝果汁。注 的發音和 相同。只用在表示助詞時。2.名詞 日語的動詞 可以將其大範圍的名詞列為受詞。意思是執行該受詞表示的內容。下面舉幾個例子。1 運動,遊戲等 踢足球 玩撲克牌 2 集會,活動等 舉行派對 會議 召開會議 3 其他 宿題 做...