单击链接时如何使 Onclick 代码不执行

Posted 2023-03-05

【中文标题】单击链接时如何使 Onclick 代码不执行

【英文标题】：How to make Onclick code to not execute when a link is clicked

【发布时间】：2021-09-16 17:15:47

【问题描述】：

如果点击了超链接，不确定如何让此代码不触发

$(document).ready(function () 

  $('.accordion-list > li > .answer').hide();

  $('.accordion-list > li').click(function () 
    if ($(this).hasClass("active")) 
          
      ////if link is clicked then exit this function////
       
      $(this).removeClass("active").find(".answer").slideUp();
      
     else 
        
      $(".accordion-list > li.active .answer").slideUp();
      $(".accordion-list > li.active").removeClass("active");
      $(this).addClass("active").find(".answer").slideDown();
    
    return false;
  );

【参考方案1】：

检查事件目标以获取单击的元素（可能是<li> 的后代）。如果目标具有<a>s 的任何祖先，则停止该函数。

$('.accordion-list > li').click(function (event) 
    if ($(this).hasClass("active")) 
        if (event.target.closest('a')) 
            // an <a> was clicked
            return;
        

【参考方案2】：

试试这个以防止点击继续执行。

$(document).ready(function () 

  $('.accordion-list > li > .answer').hide();

  // ***** pass event parameter e
  $('.accordion-list > li').click(function (e) 
    if ($(this).hasClass("active")) 
          
      // ***** prevent click to continue execute 
      e.preventDefault();
      
      $(this).removeClass("active").find(".answer").slideUp();
      
     else 
        
      $(".accordion-list > li.active .answer").slideUp();
      $(".accordion-list > li.active").removeClass("active");
      $(this).addClass("active").find(".answer").slideDown();
    
    return false;
  );