在完成了基礎的樣式建設後，開發團隊隨即投入到系統核心首頁的佈局規劃（index.html）以及通用腳本（common.js）的實作中。首頁是使用者與我們系統互動的第一線，其載入速度、排版邏輯以及互動的順暢度，將直接決定使用者對產品的第一印象。在這個階段，我們的目標是打造一個語意化、結構清晰且具備良好響應式設計（Responsive Web Design）的網頁框架。同時，我們需要實作一系列基礎的 JavaScript 工具函式與全域事件監聽，以確保導覽列、側邊選單等共用元件在不同頁面間能夠保持一致的行為邏輯。
在建構核心腳本的過程中，我們面臨了一個在行動裝置網頁開發中相當經典且棘手的坑（Pitfall）：行動裝置瀏覽器的 300 毫秒點擊延遲（300ms Click Delay）。起初，我們在 common.js 中使用了標準的 click 事件來綁定所有的按鈕與互動元素。在桌面版瀏覽器上測試時，一切都顯得非常流暢，使用者的每次點擊都能夠得到即時的反饋。然而，當我們將專案部署至測試環境，並使用手機與平板進行實機測試時，卻發現介面的反應顯得異常遲鈍。每當使用者點擊按鈕，系統似乎都會猶豫一小段時間才執行對應的操作，這讓整個應用程式感覺非常沉重，完全失去了現代網頁應用該有的輕巧感。經過深入的診斷與文獻查閱，我們確認了這個問題的根源在於早期行動瀏覽器為了解決雙擊縮放（Double-tap to zoom）功能所遺留下來的機制。當使用者在螢幕上點擊一次時，瀏覽器並不會立刻觸發 click 事件，而是會刻意等待大約 300 毫秒，以觀察使用者是否會進行第二次點擊來觸發縮放。儘管現代瀏覽器在某些條件下已經逐漸改善了這個問題，但在我們當時的某些測試機型與特定佈局下，這個延遲仍然顯著地影響了操作體驗。
為了解決這個嚴重的效能與體驗瓶頸，我們著手修改了通用腳本中的事件綁定邏輯。我們決定在需要極速反應的觸控裝置上，優先採用 touchstart 事件來取代傳統的 click 事件。然而，單純地將所有的 click 替換為 touchstart 也是危險的，因為這會導致使用者在螢幕上進行滑動（Scroll）操作時，不小心觸發按鈕點擊，產生所謂的「誤觸」。因此，我們實作了一套更為完善的事件處理機制，透過監聽觸控的起始、移動與結束，來精確判斷使用者的意圖。如果是單純的輕點，我們便會立即觸發相應的操作，並隨即攔截後續的 click 事件，以避免重複執行；如果是滑動，則取消點擊的觸發。
這項核心邏輯的改動，帶來了巨大的使用者體驗（UX）升級。解決了 300 毫秒的延遲後，所有的按鈕與選單反應變得極度清脆與即時，使用者現在能夠享受到媲美原生應用程式（Native App）般的流暢操作感。系統介面的回饋變得更加直覺，大幅降低了使用者的操作挫折感。以下是我們在 common.js 中事件綁定邏輯修改前後的程式碼對照：
// 使用傳統的 click 事件，導致行動裝置 300ms 延遲
const navButton = document.querySelector('.menu-toggle');
navButton.addEventListener('click', function(event) {
event.preventDefault();
toggleNavigationMenu();
console.log('選單已切換');
});
// 在手機上點擊時，感覺反應非常遲鈍
// 影響整體操作流暢度// 實作支援 touchstart 的高靈敏事件處理
const navButton = document.querySelector('.menu-toggle');
let isTouch = false;
navButton.addEventListener('touchstart', function(event) {
isTouch = true;
event.preventDefault(); // 阻擋後續預設行為
toggleNavigationMenu();
}, { passive: false });
navButton.addEventListener('click', function(event) {
if (isTouch) {
isTouch = false;
return; // 若已由 touch 觸發，則忽略 click
}
toggleNavigationMenu();
});這段開發過程讓我們深刻體認到，在跨平台的網頁開發中，不能僅僅依賴桌面環境的測試結果。深入理解不同裝置與瀏覽器底層的運作機制，並針對其特性進行優化，是打造頂尖前端產品不可或缺的能力。首頁與通用腳本的成功實作，不僅確立了專案的架構基調，更為使用者帶來了無縫且快速的互動體驗。