如何使用 JavaScript 检测触摸屏设备？

有时您可能正在寻找一些功能以包含在您的网络应用程序中，这些功能应该只适用于带有触摸屏的设备。在游戏应用程序或 GPS 和导航应用程序中为触摸屏用户引入更新的智能控件时，您可能需要此检测。虽然有许多 JavaScript 库，例如 Modernizer、jQuery 等，但它们都是明确设计用于执行此类任务的。
需要注意的是，设备支持触摸事件并不一定意味着它是唯一的触摸屏设备。许多高端超极本都支持触控。因此，为了获得更好的用户体验，您应该在检查触摸屏设备的同时考虑更多属性。
要执行此检查，针对所有可能的浏览器，我们将使用以下三个属性；

• ontouchstart：一个事件处理程序，用于处理触摸 DOM 元素后触发的事件。
• maxTouchPoints： Navigator 接口的只读属性，返回设备支持的同时触摸接触点的最大数量。
• msMaxTouchPoints：与上面相同，只是使用供应商前缀“ms”来定位浏览器 IE 10 及以下版本。

句法：

javascript

function is_touch_enabled() {
    return ( 'ontouchstart' in window ) ||
           ( navigator.maxTouchPoints > 0 ) ||
           ( navigator.msMaxTouchPoints > 0 );
}

示例：此示例在检测到触摸屏设备时显示图像，否则图像将不显示。

html

 

    
        Detect touch screen device
        using JavaScript
    

 

    
        Detect touch screen device
        using JavaScript
    
     
    
        If touch screen detected then display
        an image otherwise image will not
        display   
    
     
    
 
    
     
        function is_touch_enabled() {
            return ( 'ontouchstart' in window ) ||
                   ( navigator.maxTouchPoints > 0 ) ||
                   ( navigator.msMaxTouchPoints > 0 );
        }
     
        var src =
"https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png";
     
        if( is_touch_enabled() ) {
            var img = "<img src=" + src + " height='100'/>";;
        }
        else {
            var img = "";
        }
     
        document.getElementById('GFG').innerHTML = img;
    

 
                   

输出：

• 非触摸屏输出：
  

• 触摸屏输出：
  

示例 2：在此示例中，

仅在设备支持触摸时才可拖动。

html

     

    
        Detect touch screen device
        using JavaScript
    
     
    
     
    
     
    
    
     
    
    
 
    
        #draggable {
            width: 150px;
            height: 50px;
            text-align: center;
        }
    
     
    
        function is_touch_enabled() {
            return ( 'ontouchstart' in window ) ||
                   ( navigator.maxTouchPoints > 0 ) ||
                   ( navigator.msMaxTouchPoints > 0 );
        }
         
        if( is_touch_enabled() ) {
            $(function() {
                $( "#draggable" ).draggable();
            });
        }
    

 

    
        Draggable Elements!
    

 
                   

输出：

• 非触摸屏输出：
  

• 触摸屏输出：