貓頭鷹旋轉木馬的數據點的特定元素點擊發送到第一張幻燈片，但周圍的點擊發送到相應的滑道

Question

當我點擊我的數據點導航中的點，滑似乎恢復到第一張幻燈片。但是，如果我點擊像素關閉fa-circle，或文本，它進入相應的滑道。我試着看着事件發生，但我似乎無法找出究竟是什麼原因造成的。

Here is a link to my site in progress

我不是在特別困難的運行任何東西，一直在玩和不使用這段代碼：

我打電話到滑動元件用：

<div class="item" data-dot ="<span><i class='fa fa-circle'></i></span><span><?php _e($i['description'], 'firkisok');?></span>"> 
    Content item stuff happens here 
</div> 

(function($) { 
    $(function() { 

    // Call Vars 
    var owl = $('.owl-carousel'); 

    // Setup owlCarousel 
    owl.owlCarousel({ 
     dots: true, 
     dotsData: true, 
     center: true, 
     autoWidth: true, 
     smartSpeed: 500, 
    }); 

    $('.owl-dot').on('click', function() { 
     owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
     $('.owl-dot').removeClass('active'); 
     $(this).addClass('active'); 
    }) 
    $('.owl-dot span .fa-circle').on('click', function() { 
     owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
     $('.owl-dot').removeClass('active'); 
     $(this).parent().parent().addClass('active'); 
    }) 
})(jQuery); 

無論是活躍與否，該事件仍然發生一樣，點擊fa-circle重置幻燈片下滑1

Answer 1

當我應用CSS屬性pointer-events: none到您的網頁上fa-circle元素，傳送帶正常工作。這告訴我，這些圓形元素上的事件處理程序不是必需的，只會導致問題。因此，你完全可以將其刪除，並保持在owl-dot元素只有在事件處理程序：

$('.owl-dot').on('click', function() { 
    owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
    $('.owl-dot').removeClass('active'); 
    $(this).addClass('active'); 
}) 

// Remove this event handler 
//$('.owl-dot span .fa-circle').on('click', function() { 
// owl.trigger('to.owl.carousel', [$(this).index(), 300]); 
// $('.owl-dot').removeClass('active'); 
// $(this).parent().parent().addClass('active'); 
//})