為什么我的 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;
        });
    });