JavaScript DOM中的指针事件

指针事件 是一组 DOM （文档对象模型）事件，提供了一种统一的方法来处理来自各种设备（如触摸屏、鼠标和笔/触控笔）的输入。这些事件受现代浏览器支持，允许开发者编写能够以一致且可预测的方式响应用户与页面的交互的代码，而不受使用的输入设备的类型的限制。

一些最常用的指针事件包括：

pointerdown： 当用户在元素上按下指针时触发的事件
pointerup： 当用户将指针从元素上释放时触发的事件
pointermove： 当用户将指针移动到元素上时触发的事件
pointerover： 当用户将指针移动到元素上时触发的事件
pointerout： 当用户将指针移出元素时触发的事件
pointercancel： 当用户的指针交互被中断时触发的事件（例如切换到不同应用程序时）

语法：

pointerdown属性：

<element pointerdown ="ID">

pointerup 属性：

<element pointerup ="ID">

pointermove属性：

<element pointermove ="ID">

pointerover属性：

<element pointerover= "ID">

pointerout属性：

<element pointerout = "ID">

pointercancel 属性：

<element pointercancel= "ID">

为什么指针事件比鼠标事件更好？

指针事件和鼠标事件都用于处理用户与网页的交互，如点击、悬停和滚动。然而，由于以下几个原因，通常认为指针事件比鼠标事件更好：

指针事件在不同设备上提供更一致的体验： 指针事件设计用于与多种输入设备配合使用，包括触摸屏、鼠标和触控笔。
指针事件提供更多信息： 指针事件提供有关输入设备的更多信息，如设备类型（例如鼠标、触摸、笔）、压力和倾斜度。
指针事件更高效： 指针事件设计为更节省内存、负载更低的方式，比鼠标事件效率更高。
指针事件更灵活： 指针事件比鼠标事件更灵活，可以处理单点触控和多点触控交互。

示例1： 下面的程序说明了pointermove和pointerout属性：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Pointer events Javascript DOM</title> 
</head> 
  
<body> 
    <center> 
        <div> 
            <h1> 
                Welcome to GeeksforGeeks 
            </h1> 
            <p id="myP" onpointermove="pointerMove()" 
                onpointerout="pointerOut()"> 
                The pointerMove() function works when the 
                pointer is go over text and this paragraph 
                sets the color of the text to 'red'. 
                The pointerOut() function works when the 
                pointer goes out of text zone then and the 
                color of the text sets to 'blue'. 
            </p> 
        </div> 
        <script> 
            function pointerMove() { 
                document.getElementById("myP") 
                    .style.color = "red"; 
            } 
            function pointerOut() { 
                document.getElementById("myP") 
                    .style.color = "blue"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出:

JavaScript DOM中的指针事件

示例2: 以下是演示pointerup、pointerdown和pointerover属性的程序代码:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Pointer events Javascript DOM</title> 
</head> 
  
<body> 
    <center> 
        <div> 
            <h1> 
                Welcome to GeeksforGeeks 
            </h1> 
            <p id="myP" onpointerup="pointerUp()" 
                onpointerdown="pointerDown()" 
                onpointerover="pointerOver()"> 
                Pointer events are a set of DOM (Document  
                Object Model) events that provide a unified  
                way of handling inputs from a variety of  
                devices, such as touchscreens, mouse, and  
                pen/stylus. These events are supported by  
                modern browsers and allow developers to  
                write code that responds to user  
                interactions with the page in a consistent  
                and predictable way, regardless of the type 
                of input device being used. 
            </p> 
  
            <script> 
                function pointerUp() { 
                    document.getElementById("myP") 
                        .style.color = "red"; 
                } 
                function pointerDown() { 
                    document.getElementById("myP") 
                        .style.color = "blue"; 
                } 
                function pointerOver() { 
                    document.getElementById("myP") 
                        .style.color = "yellow"; 
                } 
            </script> 
    </center> 
</body> 
  
</html>

输出: