如果 html 元素有 class，避免 link 访问

Question

我有一个 HTML -元素作为文章的购买 link。当这篇文章售罄时，这个 link 得到 class="sold-out"。当有人点击 link 时，它会打开一个 jQuery 神奇的弹出窗口，其中包含结帐表单。但是当它有我想要的 class "sold-out" 时，这个 link 是不可点击的。要实现这一点 link-遵循预防我有问题。

我的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- 元素的 link 但它不应该做任何事情。怎么了？

Answer 1

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

您只是在监听 mousedown 事件，但也会在元素上触发 click 事件，默认情况下 click 事件会触发 <a> 标签将遵循 href 属性。

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

如果 html 元素有 class，避免 link 访问

Avoid link visit if html element has class

javascript

jquery

html

magnific-popup