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

Question

我有一个 HTML 元素作为文章的购买链接。当这篇文章售罄时，此链接将获得类 =“售罄”。当有人单击该链接时，它将打开一个包含结帐表单的 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事件也会在元素上触发，默认情况下是 click <a> 的事件标签将跟随 href属性。

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