使用'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的問題

回答

相關問題