- 姓名：楊于晨
- 系級/學號：經濟碩二/r10323003
- 你所實作的網站如何被測試，並描述你所繳交的任何額外 shirts.js 文件（若有）。
- 打開 index.html 並按按鈕連結到各個頁面檢查
- shirts_20: 共有 20 件衣服資訊，將 index, products, details.html 等頁面的 shirts.js 改為 shirts_20.js 即可測試，在 products.html 頁面仍然會呈現正常樣貌。
- shirts_not_found: 共有 4 件衣服資訊，只是隨機挖空使得圖片連結不存在，可以將 index, products, details.html 等頁面的 shirts.js 改為 shirts_not_found.js 即可測試，測試結果應會將連結錯誤的衣服圖片改為 not_found.png。
- 你所實作的加分作業項目，以及如何觸發它。
- QuickView: QuickView 功能在商品頁面直接點選按鈕即可在頁面下方看見灰底的快速查看區塊，其中顯示商品正反面圖案、名稱、價格以及敘述，並附上關閉按鈕，且點擊圖片會連結至商品詳細頁面。
- RWD: 在響應式設計中，我主要以 768 與 576 px 作為斷點，分別設計不同的網站顯示方式，可由使用者自行伸縮視窗來測試。其中，在縮小視窗時，有許多原先橫列擺放的物件會變為直行擺放（像是商品頁面的每個商品或是細節頁面的圖片與敘述）；此外，若是螢幕寬度小至 576 px，則上方與下方列皆會濃縮至右上方的 hamburger button，點擊後即為一選單，仍然可以點擊觸發各個功能。
- 其他你所實作的網站的有趣之處
- 無
- 姓名：楊于晨
- 你 deploy 的網站連結：https://bespoke-bunny-701bd0.netlify.app
- 大略解釋你的設計，特別是你如何處理複數個事件處理程序，即你實作事件行為控制的策略
- 滑鼠點擊事件
- 首先，對於 click 事件，我單獨處理之，若是元素被點擊即會檢查其餘方塊並正確切換顏色
- 而對於長按事件，當 mousedown 事件被觸發，我會綁定兩個 eventListener，分別對應到 mousemove 以及 keydown 事件，前者負責拖曳元素，後者則為偵測是否按下 esc 來結束行動。而當 mouseup 時，會解除上述兩者的綁定
- 對於雙擊事件，我利用和長按事件相同邏輯，綁定兩個 eventListener 分別對應 mousemove 以及 keydown 事件，同時在 mouseup 時解除
- 觸控事件
- 對於單指觸擊事件，我利用 touchstart 和 touchend 來偵測兩者的位置是否於閾值內，若是，則更換方塊顏色
- 至於單手指拖移事件，我利用 touchmove 的 eventListener 來綁定元素拖移
- 雙擊的部分，我會在 touchstart 增加流程控制，若是本次 touchstart 的時間和上次 touchstart 的時間小於閾值，則觸發雙擊事件，將元素綁定 touchmove 事件，且在下次 touchend 和 touchstart 發生在接近位置且時間相近時才解除綁定
- 最後關於雙手指觸控的部分，我會先偵測觸碰的手指數量，再綁定 touchmove 於 workspace，並改變被選定的元素的長寬比例
- 其中，必須額外提及觸控時的 abort 事件，我會特別紀錄前一次的手指觸擊數量並在 workspace 使用流程控制來決定多按下一隻手指要進行什麼動作，比如說單手指拖移時第二隻手指按下螢幕，則停止行動
- 滑鼠點擊事件
- 你所實作的加分作業項目，以及如何觸發它
- 我實作的加分項目有垂直的方塊拉伸，觸發方法和水平拉伸相同，而其中的判定機制在於會計算兩根手指頭的水平距離差以及垂直距離差，挑選較大的那邊作為拉伸軸。
- 其他你所實作的網站的有趣之處
- 延續作業一，我有實作 RWD 的網站介面，但實際部署後發現還是有些跑版，在這之後也稍微調整了一下
- 另外，由於我的觸控雙擊閾值設定為 300 ms，所以實際上觸控時可能按快一些