如何在 JavaScript 中使用指標事件

要點

為了確保更廣泛的用戶群的包容性和可訪問性，網路應用程式的設計應具有傳統滑鼠以外的多種輸入選項。這種方法可以更好地適應個人需求和偏好，同時促進通用可用性。

在 JavaScript 中利用指標事件可以有效處理基於滑鼠和基於觸控的交互，從而無需為每種事件類型單獨執行過程。

現代 Web 開發中指標事件的設計與傳統滑鼠事件的設計密切相關，有助於調整現有原始程式碼以適應觸控螢幕和手寫筆輸入。

觸控螢幕技術的流行導致數位互動越來越依賴手指輸入。因此，對於現代 Web 開發實踐來說，透過傳統滑鼠驅動介面之外的各種輸入裝置來適應和促進多種形式的使用者互動至關重要。

利用 JavaScript 中稱為「指標事件」的最新標準，可以無縫整合基於滑鼠和基於觸控的輸入，從而消除了單獨實施過程的需要。

什麼是指標事件?

指標事件構成了一種普遍適用的範例，用於在網路瀏覽上下文中管理多樣化的輸入模式，包括傳統的基於遊標的介面以及觸控螢幕和手寫筆驅動的互動等當代替代方案。這種緊密結合的方法可確保與基於互聯網的內容無縫連接，無論採用何種硬體平台。

從本質上講，指標事件有助於管理一組使用者交互，無論其來源為何。

指標事件的類型

指標事件的名稱與您可能已經知道的滑鼠事件的名稱相似。 JavaScript 中每個滑鼠事件對應的是其各自的指標事件，允許從「滑鼠」到「指標」的轉換，以支援觸控和筆輸入裝置。

提供的圖表展示了各種指標事件與其對應的滑鼠事件的並排比較:

指針事件

|

滑鼠事件

—|—

指針向下

|

滑鼠按下

指針向上

|

滑鼠向上

指針移動

|

滑鼠移動

指針離開

|

滑鼠離開

指針懸停

|

滑鼠移到

指針輸入

|

穆埃森特

指針輸出

|

滑鼠移出

指針取消

|

沒有任何

得到指針捕獲

|

沒有任何

丟失指針捕獲

|

沒有任何

顯然，存在缺少相關滑鼠事件的三個補充指標事件。將在適當的時候描述對此類事件的理解。

在 JavaScript 中使用指標事件

您可以以類似於滑鼠事件的方式使用指標事件，處理此類事件的典型工作流程通常遵循以下結構:

利用 DOM 查詢機制，透過在 HTML 程式碼中指定其唯一識別碼或屬性，從文件物件模型中檢索特定的 HTML 元素，從而能夠使用 JavaScript 或其他程式語言對所選元素進行高效操作和互動。

利用「addEventListener」方法，我們可以指定感興趣的事件並將其與事件發​​生時要執行的函數關聯起來。

利用作為參數傳遞給回呼函數的事件物件的屬性和函數，該事件物件表示觸發程式碼中的反應或回應的事件。

這是使用pointermove事件的範例:

 // Get the target element
const target = document.getElementById('target');

// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);

// Function to handle pointer move event
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

提供的程式碼在其 DOM 中建立一個指定對象，以及回應「pointermove」事件的 JavaScript 腳本功能。透過使用 JavaScript 函數，此程式碼將事件偵聽器新增至指定的目標元素，該目標元素將基於指標的操作和關聯的函數綁定在一起。

這段程式碼可以透過遊標、手指或筆在網頁上移動目標元素來實現網頁上目標元素位置的視覺化。相關元素透過其唯一的“目標”標識符來識別。

以類似的方式，您可以使用各種指標事件來達到您的預期目的。

指標取消事件

當不同的指標事件在其預期完成之前乾擾並終止其正在進行的執行時，PointerCancel 事件就會啟動。通常，瀏覽器將取消在中斷時可能發生的任何先前的指標事件。有多種因素可能導致此事件的激活，包括但不限於:

透過基於觸控的互動主動操作電子設備時（例如在顯示器上拖曳元素），使用者可能會因需要立即關注的來電或通知而遇到工作流程中斷。

⭐當設備方向改變時。

⭐當瀏覽器視窗失去焦點時。

當使用者選擇離開當前介面或與另一個程式互動時，發出離開當前註意力焦點的信號並指示優先順序發生變化。

pointercancel 事件提供了一種通用的解決方案，可根據您的特定要求自訂解決各種場景的方法。下面提供一個示範實例:

 const target = document.getElementById('target');

target.addEventListener('pointercancel', (event) => {
    // Handle the situation where the pointer cancels. For example, you
    // can release the pointer capture
    target.releasePointerCapture(event.pointerId);
});

指標捕獲

指標擷取允許指定的 HTML 元素攔截針對它的所有基於指標的交互並做出反應，無論它們是在其描繪的邊界之內還是之外發生。

setPointerCapture() 方法允許捕獲與特定元素相關的指針，而 releasePointerCapture() 方法則釋放與該特定元素關聯的任何捕獲的指針。

指標擷取事件，無論是獲得的還是遺失的，都可以有效地用於捕獲各種場景中的指標。

gotpointercapture 事件

當元素捕獲指標輸入時，會觸發「gotpointercapture」事件。此事件可用於建立處理 HTML 元素上的指標事件的狀態。例如，在繪圖程式中，可以利用「gotpointercapture」事件來設定遊標的起始位置。

LostPointerCapture 事件

每當元素放棄對滑鼠指標的控制時，就會啟動遺失指標擷取事件。此事件提供了釋放或消除元素獲取指標捕獲時啟動的任何先前建立的狀態的機會。在繪圖程式等圖形應用程式中，遺失指標擷取事件可用於隱藏遊標的存在，透過無縫互動和視覺沉浸增強使用者體驗。

指標事件的屬性

指標事件具有某些有助於增強網站互動性和回應能力的屬性。這些屬性反映了滑鼠事件中發現的屬性，同時也包含補充特徵。本文深入研究了這些附加功能的選擇。

###pointerId 屬性

「pointerId」是分配給每個單獨的基於指標的輸入的獨特標識符，包括使用手寫筆、手指或滑鼠進行的輸入。由瀏覽器提供的自動產生的標識符能夠追蹤多個輸入，並促進與每個對應輸入相關聯的各種動作的執行。

在多點觸控遊戲場景中，PointerId 屬性可作為區分個別手指或觸控筆輸入的有效方法。透過為每個指針的表面分配唯一的標識符，系統可以準確區分和處理來自多個來源的不同觸摸，並將初始輸入指定為主 ID。

當與基於觸控的裝置一起使用時，此屬性表現出相當大的實用性，因為此類裝置能夠同時容納多個手指輸入，而不需要任何額外的外圍硬體。相較之下，主要依賴使用滑鼠指標的面向遊標的設備在同時接收多個指標輸入的能力方面受到限制，因此需要結合輔助設備來實現此功能。

當然，這裡是所討論的程式碼片段的一個優雅的措辭版本:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout « “指針1 的ID:"« *ptr1 « std::endl;std::cout « 「指標2 的ID:"« *ptr2 « std::endl;}//用法:int main() {int arr[5]={0, 1, 2, 3, 4};auto ptr1=到達；//使用陣列「arr」第一個元素的位址宣告並初始化指標「ptr1」。auto ptr2=&arr[1];//宣告並初始化指標'

 const target = document.getElementById('target');

target.addEventListener('pointerdown', (event) => {
    console.log(`Pointer ID: ${event.pointerId}`);
    // Handle the pointer down event for the specific pointerId
});

指標型別屬性

「滑鼠」、「筆」或「觸碰」。以下是使用「pointerType」屬性的簡單說明:

 function handlePointerEvent(event){
    // Using the pointerType property
    switch (event.pointerType) {
    case 'mouse':
        // Handle the situation where the pointing device is a mouse
        console.log(`Mouse Pointer ID: ${event.pointerId}`);
        break;
    case 'pen':
        // Handle the situation where the pointing device is a stylus
        console.log(`Stylus Pointer ID: ${event.pointerId}`);
        break;
    case 'touch':
        // Handle the situation where the pointing device is a finger touch
        console.log(`Touch Pointer ID: ${event.pointerId}`);
        break;
    default:
        // Handle other pointer types or cases
        console.log(`pointerType ${event.pointerType} is not supported`);
        break;
    }
}

// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

寬度和高度屬性

這些屬性以毫米為單位表示指針接觸區域的尺寸。不幸的是，某些 Web 瀏覽器無法辨識這些屬性，導致這些特定瀏覽器的常數值為 1。

上述屬性的適當應用可以在需要精確輸入或需要區分不同大小的輸入的程式中找到。作為說明，考慮一個繪圖程序，其中增加的尺寸對應於更廣泛的筆觸，相反，更小的測量值表示更窄的手勢。

通常，在 Web 開發中處理觸控事件時，通常的做法是利用寬度和高度屬性。

使用指標事件以獲得更多包容性

利用指標事件可以大大簡化適應不同設備和輸入模式的過程，從而無需您付出過多的努力。強烈建議將這些事件合併到您的應用程式中，以符合當前標準，因為這有助於增強 Web 體驗。