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

Question

在一个项目中，我将Owl Carousel与featherlight结合使用。在猫头鹰轮播中，您可以激活“mouseDrag”，以便您可以用鼠标拖动轮播。这很好用！此外，当我在幻灯片中有真正的超链接时，拖动时它不会打开它们。

但有了羽毛灯就不同了。如果我在幻灯片中有羽毛链接，它会在我拖动 carousel 时打开它们。为什么会这样？我能以某种方式纠正这种行为吗？

我做了一个演示问题的代码示例：（ 请拖动两个轮播）

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>

我怎样才能解决这个问题？

标签： javascriptjqueryowl-carouselfeatherlight.js

Answer 1

您可以利用该事件在全局变量的帮助下（在下面的代码中）changed.owl.carousel阻止使用beforeOpenin触发链接。为此，您需要防止元素与属性的自动绑定。您可以通过多种方式进行操作，我只是消除了该属性。理论上，你也可以设置为DOM 加载之前，但我没有尝试过。我正在显示下面的代码，但它似乎无法正常工作。但是，它适用于codepenfeatherlightfollowFeatherlightlinkdata-featherlight$.featherlight.autoBindfalse

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>