Question

我有一个HTML -Element作为文章的购买链接。当这篇文章售罄时，这个链接获得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事件，默认情况下click标记的<a>事件将遵循href属性。

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

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

1 个答案: