javascript - Owl Carousel 2 和 Featherlight.js – mouseDrag 导致打开灯箱

Question

在我使用的项目中 Owl Carousel结合featherlight .在 Owl Carousel 中，您可以激活“mouseDrag”，这样您就可以用鼠标拖动旋转木马。这很好用!此外，当我在幻灯片中有真正的超链接时，它在拖动时不会打开它们。

但是使用 featherlight 就不一样了。如果我在幻灯片中有 featherlight-links，它会在我拖动轮播时打开它们。为什么会这样？我能以某种方式纠正这种行为吗？

我制作了一个演示问题的代码示例:(请拖动两个轮播)

https://codepen.io/xj6652/pen/OJNPOqj

拖动轮播时它会打开灯箱:

<div class="owl-carousel featherlightlinks">
  <div> 
    <a href="#" data-featherlight="#content" class="blocklink"></a>
  </div>
  …
</div>

但是幻灯片中的普通链接不会发生这种情况:

<div class="owl-carousel reallinks">
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  …
</div>

我该如何解决这个问题？

Answer 1

您可以利用 changed.owl.carousel 事件在 featherlight 的帮助下使用 beforeOpen 来防止触发链接一个全局变量(下面代码中的followFeatherlightlink)。为此，您需要防止自动绑定(bind)具有 data-featherlight 属性的元素。您可以通过多种方式做到这一点，我只是消除了该属性。理论上，您也可以在加载 DOM 之前将 $.featherlight.autoBind 设置为 false，但我没有尝试过。我正在显示下面的代码，但它似乎无法正常工作。但是，它适用于 codepen

let followFeatherlightlink = true;
$(".owl-carousel").owlCarousel({
  margin:10,
  loop:true,
  dots: false,
  nav: false,
  items: 3
});
$(".owl-carousel").on('changed.owl.carousel', function(event) {
  followFeatherlightlink = false;
});
$(document).ready(function(){
   $('.featherlightlinks .blocklink').featherlight('#content', {
  beforeOpen: function(event){
  let result = followFeatherlightlink;
  followFeatherlightlink = true;
    return result; 
}
});
});

* {
  box-sizing: border-box;
}

.owl-carousel {
  position: relative;
  width: 100%;
}

.owl-carousel div{
  position: relative;
}

.owl-item {
  background-color: #D2527F;
  color: white;
  text-align: center;
  height: 200px;
  width: 200px;
}

a.blocklink{
  color: red;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
  display: block;
}

.reallinks a.blocklink{
  background: green;
}

.hidden{
  display: none;
}

h2:nth-of-type(2){
  margin-top: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>
<h2>Problem: Dragging causes open lightbox</h2>
<div class="owl-carousel featherlightlinks">
  <div> 
    <a href="#" class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
</div>


<div class="hidden">
  <div id="content">My Lightbox Content</div>
</div>


<h2>With real links it is working</h2>
<div class="owl-carousel reallinks">
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
</div>