如果 html 元素有类，则避免链接访问

Question

我有一个 HTML 元素作为文章的购买链接。当本文售罄时，此链接将获得 class="sold-out"。当有人单击该链接时，它将打开一个包含结帐表单的 jQuery maginific-popup。但是，当它具有我想要的“售罄”类时，该链接不可点击。为了实现这种链接跟踪预防，我遇到了问题。

我的 HTML：

<a href="checkout.php" class="btn-1 ajax-popup sold-out">Purchase</a>

我的 JS：

$('.ajax-popup').mousedown(function(e){
    e.preventDefault();
    if($(this).hasClass("sold-out")) {
        return false;
    }
    var region = $(this).data('region');
    var quantity = $(this).data('quantity');
    if(typeof quantity == 'undefined') quantity = $(this).parent().find('select').val();
    var packageid = $(this).data('packageid');

    $(this).magnificPopup({
      type: 'ajax',
      ajax: {
          settings: {
              data : {
                  region : region,
                  quantity : quantity,
                  packageid : packageid,
              }
          }
      },
      closeOnContentClick: false,
      closeOnBgClick: false
   });

});

会发生什么： 事实上，它避免了 ajax-popup，但在这种情况下，它仍然遵循 HTML 元素的链接，但它不应该做任何事情。怎么了？

Answer 1

您还需要添加e.stopPropagation() 以防止点击触发。

您只是在侦听mousedown 事件，但也会在元素上触发click 事件，默认情况下，<a> 标记的click 事件将跟随href 属性。

我很好奇你为什么绑定到mousedown 事件而不是click 事件？如果您更改为click 事件，我相信e.preventDefault() 会直接处理。