jQWidgets jqxTouch tapHoldDelay Property

Last Updated : 14 Nov, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTouch is used for identifying and triggering touch events such as ‘swipe’, ‘swipe left’, ‘swipe right’, ‘tap’, and ‘orientationchange’ on touch-enabled devices.

The tapHoldDelay property is used for setting or getting the taphold delay for the specified jqxTouch widget. The taphold event will be fired when this delay is passed.

Syntax:

For setting the tapHoldDelay property:

$('#jqxTouch').jqxTouch({tapHoldDelay: 999});

For getting the tapHoldDelay property:

var swipeMin = $('#jqxTouch').jqxTouch('tapHoldDelay');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtouch.js”></script>
<script type=”text/javascript” src=”scripts/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxTouch tapHoldDelay property. In the below example, the value for the tapHoldDelay property has been set to 2500.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css"
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxtouch.js"> 
    </script> 
    <script type="text/javascript" 
            src="scripts/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxTouch tapHoldDelay Property 
        </h3> 
        <div id="jqx_Touch"> 
            <div style="height: 100px;  
                      width: 350px; 
                      color: black;  
                      border-radius: 10px; 
                      background: green;"> 
                <b>Swipe, Swipe Left, Swipe Right and Tap</b> 
            </div> 
        </div> 
        <input type="button" style="margin: 28px;"
               id="button_for_tapHoldDelay"
         value="Value of the tapHoldDelay property"/> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Touch').jqxTouch({ 
                    tapHoldDelay: 2500 
                }); 
                $('#jqx_Touch').on('swipeleft', function () { 
                    $("#log").html("Swiped left"); 
                }); 
                $('#jqx_Touch').on('swiperight', function () { 
                    $("#log").html("Swiped right"); 
                }); 
                $('#jqx_Touch').on('tap', function () { 
                    $("#log").html("Tapped"); 
                }); 
                $('#jqx_Touch').on('swipe', function () { 
                    $("#log").html("Swiped"); 
                }); 
                $("#button_for_tapHoldDelay"). 
                    jqxButton({ 
                        width: 300 
                    }); 
                $("#button_for_tapHoldDelay").click( 
                    function () { 
                        var tapHoldDelay_Value = 
                          $('#jqx_Touch'). 
                             jqxTouch('tapHoldDelay'); 
                     $("#log").html(tapHoldDelay_Value); 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>