如何使用 jQuery 在元素内执行单击并按住操作？

给定一个 HTML 元素，任务是单击并按住文档中的元素几秒钟，以使用 jQuery 执行操作。

方法：

• 选择一个 HTML 元素。
• 将事件侦听器添加到该元素并为该事件添加超时计时器。
• 如果该事件恰好处于活动状态几秒钟，则触发其他事件以识别该事件发生。

示例 1：在此示例中，在 div 内单击并按住 2 秒将触发其他事件，该事件仅打印发生的事件。

 
 
  
 
     
        How to perform click-and-hold operation
        inside an element using jQuery ?
    
      
    
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    
      
    
    
 
  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
    
        Div Element.
    
    
      
    
    
      
    
        $('#GFG_UP').text("Click and Hold inside the"
                    + " div for 2 seconds");
          
        var tId = 0;
          
        $('#div').on('mousedown', function() {
            tId = setTimeout(GFG_Fun, 2000);
        }).on('mouseup mouseleave', function() {
            clearTimeout(tId);
        });
          
        function GFG_Fun() {
            $('#GFG_DOWN').text("Click and Hold for 2 "
                    + "seconds, done.");
        }
     

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：在此示例中，在正文文档内单击并按住 2 秒将触发其他事件，该事件仅打印发生的事件。本示例将mousedown和mouseup事件的逻辑分开。

 
 
  
 
     
        How to perform click-and-hold operation
        inside an element using jQuery ?
    
      
    
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    
      
    
    
 
  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
    
        Div Element.
    
    
      
    
    
      
    
        $('#GFG_UP').text("Click and Hold inside the"
                    + " div for 2 seconds");
          
        var tId = 0;
          
        $("#div").mousedown(function() {
            tId = setTimeout(GFG_Fun, 2000);
            return false;
        });
        $("#div").mouseup(function() {
            clearTimeout(tId);
        });
          
        function GFG_Fun() {
            $('#GFG_DOWN').text("Click and Hold for 2 "
                    + "seconds, done.");
        }
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：