<a>使用 JavaScript/jQuery</a>单击链接时如何显示确认对话框？

使用 JavaScript / jQuery 单击 链接时如何显示确认对话框？

给定 元素，任务是在 JavaScript 和 jQuery 的帮助下，在单击 链接时显示确认消息。

使用 JavaScript 单击 链接时显示确认对话框

• onclick 事件：当用户单击某个元素时发生此事件。

  句法：

  • 在 HTML 中：

  • 在 JavaScript 中：

    object.addEventListener("click", myScript);

  • 在 JavaScript 中，使用 addEventListener() 方法：

    object.onclick = function() {myScript};

• addEventListener() 方法：此方法向文档添加事件处理程序。

  句法：

  
  
  
  

  document.addEventListener(event, function, useCapture)

  参数：

  • 事件：此参数是必需的。它指定字符串，事件的名称。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。当事件发生时，一个事件对象作为第一个参数传递给函数。类型取决于指定的事件。例如，“click”事件属于 MouseEvent 对象。
  • useCapture：该参数是可选的。它指定一个布尔值，这意味着事件应该在捕获阶段还是在冒泡阶段执行。
    • true：事件处理程序在捕获阶段执行。
    • false：事件处理程序在冒泡阶段执行。

示例 1：此示例向带有onclick 事件的链接添加了confirm() 方法。这将验证您是否要继续。

 
 
     
         
            Display a confirmation dialog when
            clicking an a tag link
        
     
      
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        
            Link
        
          
        
          
        
        
          
        
            var el_up = document.getElementById("GFG_UP");
              
            el_up.innerHTML = 
                "Click on the LINK for further confirmation."; 
         
     
                    

输出：

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

示例 2：本示例为所有链接添加一个类确认。在此之后，它会在onclick 事件上将EventListener添加到该类的元素中。然后它调用一个方法来单独处理确认对话框。

 
 
     
         
            Display a confirmation dialog when
            clicking an a tag link
        
     
      
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        Link
          
        
          
        
        
          
        
            var el_up = document.getElementById("GFG_UP");
                  
            el_up.innerHTML =
                    "Click on the LINK for further confirmation."; 
              
            var el = document.getElementsByClassName('confirm');
              
            var confirmThis = function (e) {
                if (!confirm('Are you sure?')) e.preventDefault();
            };
              
            for (var i = 0, l = el.length; i < l; i++) {
                el[i].addEventListener('click', confirmThis, false);
            }
         
     
                    

输出：

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

使用 jQuery 单击 链接时显示确认对话框

• jQuery on() 方法：该方法为被选元素和子元素添加一个或多个事件处理程序。

  句法：

  $(selector).on(event, childSelector, data, function, map)

  参数：

  • 事件：此参数是必需的。它指定一个或多个事件或命名空间以附加到所选元素。如果有多个事件值，它们之间用空格分隔。事件必须是有效的。
  • childSelector：这个参数是可选的。它指定事件处理程序应该只附加到定义的子元素。
  • 数据：该参数是可选的。它指定要传递给函数的附加数据。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。
  • map：它指定了一个事件映射（{event:func(), event:func(), ...}）具有一个或多个要添加到所选元素的事件，以及在事件发生时运行的函数。

示例 1：本示例向所有链接添加一个类确认。在此之后，它将EventListener添加到该类的元素中， onclick 事件。然后它调用确认对话框。

 
 
     
         
            Display a confirmation dialog when 
            clicking an a tag link
        
          
        
        
     
  
    
           
         
            GeeksForGeeks 
        
          
        
        
          
        Link
          
        
          
        
        
          
        
            $("#GFG_UP").
                text("Click on the LINK for further confirmation."); 
                  
            $('.confirm').on('click', function () {
                return confirm('Are you sure?');
            });
         
     
                    

输出：

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

示例 2：此示例向带有onclick 事件的链接添加了confirm() 方法。这将验证您是否要继续。

 
 
     
         
            Display a confirmation dialog when 
            clicking an a tag link
        
          
        
        
     
      
     
      
         
            GeeksForGeeks 
        
          
        
        
          
        
            Link
        
          
        
          
        
        
          
        
            $("#GFG_UP").
                text("Click on the LINK for further confirmation."); 
         
     
                    

输出：

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

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。