Question

使用Cart.JS处理Shopify的Ajax购物车。

我隐藏的原始代码显示最初的'ajaxcart'容器：

<script>
  $(document).ready(function(){
    $("lightbox").hide();
    $("ajaxcart").hide();
    $('#button').click(function(event){
        $('lightbox').show().addClass('fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeIn');
        });
        $('ajaxcart').show().addClass('slideInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideInRight');
        });
            event.stopPropagation();
    });
    $("#button").on("click", function (event) {
        event.stopPropagation();
    });
    $('html').click(function() {
      $('lightbox').show().addClass('fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeOut');
            $(this).hide();
        });
        $('ajaxcart').show().addClass('slideOutRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideOutRight');
          $(this).hide();
        });
    });

    $('ajaxcart').click(function(event){
        event.stopPropagation();
    }); 
});
</script>

但是，当使用隐藏部分event.stopPropagation();时，由于停止事件，它会混淆使用购物车按钮的代码。

我创建了一个实时测试，因此您可以看到购物车中的按钮没有响应：https://eldecosmetics.com/pages/bergen

如何在不停止容器和Ajax中的事件的情况下安全地隐藏'ajaxcart'容器的任何想法，并且不使用event.stopPropagation();的最后一部分似乎是问题？

Answer 1

在“ajaxcart”外部点击时，不使用$('html').click(function()来隐藏div。我创建了一个新的div，其位置为：absolute;填补'ajaxcart'背后的整个身体区域。然后使用它关闭'ajaxcart'。

$('lightbox').click(function() {
      $('lightbox').show().addClass('fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeOut');
            $(this).hide();
        });
        $('ajaxcart').show().addClass('slideOutRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideOutRight');
          $(this).hide();
        });
    });

用'event.stopPropagation'发出隐藏div

1 个答案: