使用'event.stopPropagation'隐藏div的问题

使用Cart.JS处理Shopify的Ajax购物车。使用'event.stopPropagation'隐藏div的问题

我隐藏显示“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

任何想法如何安全地隐藏“ajaxcart”容器不停止的事件在容器和阿贾克斯，而不使用event.stopPropagation();这似乎是问题的最后部分？

来源

2017-07-16 Vemund Eldegard

假设'ajaxcart'是一个自定义元素，您可以使用jQuery hide方法隐藏该元素。 event.stopPropagation（）;不隐藏元素。点击（功能（事件）{ $（this）.hide（）; }）; –

@RajeshP我知道，但这并不能让我只能在'ajaxcart'之外点击时关闭'ajaxcart'。如果我删除event.stopPropagation（），单击Containera时也会关闭'ajaxcart'。 –

而不是使用$('html').click(function()在“ajaxcart”外部点击时隐藏div。我创建了一个新的div：position; 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(); 
     }); 
    });

来源

2017-07-17 09:44:25

使用'event.stopPropagation'隐藏div的问题

回答

相关问题