如何讓我的「document.click」功能在桌上型裝置和觸控裝置上都能可靠運作？

觸控裝置的文件.click功能：綜合指南

建立互動式網頁時，使用者能夠與兩個桌面上的元素進行互動而觸摸設備至關重要。使用 document.click 函數處理使用者輸入時會出現一個常見的挑戰，因為它可能無法在觸控裝置上按預期工作。

為了理解問題，讓我們考慮以下場景。您有一個子導航選單，當您按一下清單項目時該選單會展開。要關閉下拉式選單，您希望使用者能夠點擊螢幕上的任意位置。但是，由於 document.click 事件的限制，此功能可能無法在觸控裝置上執行。

觸控裝置的解決方法

要解決此問題，您可以使用另一種支援點擊和觸控輸入的方法。這是更新的解決方案：

$(document).on('click touchstart', function () {
  if ($(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

這裡的關鍵新增是 touchstart 事件偵聽器。一旦使用者觸摸螢幕上的元素，就會觸發此事件，從而提供一致的方式來偵測桌面和觸控裝置上的使用者互動。

透過組合 click 和 touchstart 事件，您可以確保文件.click 函數回應使用者輸入，無論輸入法為何。該解決方案允許用戶使用滑鼠或觸控輸入來切換下拉式選單，從而創建無縫的用戶體驗。

以上是如何讓我的「document.click」功能在桌上型裝置和觸控裝置上都能可靠運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！