为什么我的 html 链接在“Owl Carousel”中不起作用

Question

我开发了这个网站http://aevoe.com.au

我使用 Owl Carousel 作为主页上的滑动旋转木马。

但是，我将幻灯片包装在其中的链接不起作用，甚至无法点击。

这是轮播的标记：

<div class="fourteen columns offset-by-one">
    <div class="row" id="slide-margin">
        <div id="owl-demo" class="owl-carousel">
            <div><a href="works/summer-selections"><img src="images/dissolve-now.jpg" /></a></div>
            <div><a href="works/summer-selections"><img src="images/need-you-now.jpg" /></a></div>
            <div><a href="works/arcade-fire"><img src="images/the-suburbs.jpg" /></a></div>
        </div>  
    </div>
</div>

不确定是什么问题..

Answer 1

http://aevoe.com.au/assets/libs/aevoe.js

删除点击事件上的preventDefault()方法！

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a)});

否则，请正确处理href 。

例子：

 $(".a").click(function(b){newLocation=this.href;$("body").fadeOut(1000,a)});

或者

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a); window.location.href=newLocation;});

Answer 2

如果有人遇到过这个问题，请检查轮播内元素的 z-index，将其设置为较高的值，例如 1000 并进行测试。 为我解决了问题。 另外，我不得不添加这些：

z-index: 1000;
display: block;
width: 100%;
height: 100%;
position: relative;

Answer 3

我遇到了同样的问题，检查代码，在我的情况下，'.owl-nav' 按钮位于链接的 z-index 中，所以我的解决方案是操纵 DOM 以添加没有父级的按钮。

干杯

Answer 4

我终于想通了！

我有一个位于顶部的 div 并阻止了链接..

我刚刚更改了该 div 上的 z-index，链接现在可以使用了。

Answer 5

只需删除这一行：“e.preventDefault();”

$('#carousel-cartoes li a').on('click', function(e){                                
            e.preventDefault();
            var .....

Answer 6

问题可能是由样式pointer-events: none;引起的pointer-events: none; 添加到.owl-item孩子。

解决方案：

.owl-item > div {
    pointer-events: auto !important;
}

Answer 7

万一有人仍在寻找方便的解决方案，在试验时我发现将整个轮播和父母放在一个标签中，不知何故使他们可以访问。

标签嵌套得很深，但仍然可以完美点击！

这是我的示例代码：

<section class="hero-slider-area">
  <div class="container-fluid px-0 overflow-hidden">
    <span> <!--MAGIC-->
      <div class="row">
        <div class="col-12">
          <div class="hero-slider owl-carousel">
            <div class="slider-item">
              <div class="row p-5 justify-content-end">
                <div class="col-6 text-end p-5">
                  <div class="px-5">
                    <a
                      href="#"
                      class="text-white py-3 px-3"
                      style="
                        border: 3px solid #692184 !important;
                        color: #692184 !important;
                        font-weight: 800 !important;
                        z-index: 1001 !important;
                      "
                    >
                      MÁS INFORMACIÓN >
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </span>
  </div>
</section>

Answer 8

使<a>或锚标签display: block;

Answer 9

这是我对同一问题的解决方案：

HTML：

        <div id="your_selector">
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                    <img src="https://examble.com/file_name.png" />
            </div>
            ....
        </div>

CSS：

.has-href{
    cursor: pointer;
}

jQuery（JavaScript）：

    const slider= $('#your_selector');

    slider.owlCarousel({
       
       ........... (your options here) .......

    });
    slider.find(".item-link").each(function (index, currentElement) {
        $(currentElement).closest(".item").addClass('has-href'); // add class `has-href` ro change mouse cursor on hover
        $(currentElement).closest(".item").click(function(e) {
            e.preventDefault();
            window.open(
                $(currentElement).attr('href'),
                $(currentElement).attr('target')
            );
            return false;
        });
    });