Нажмите ссылку за интерактивным элементом

Question

Я сделать слайд-шоу (с использованием Slick), где «next' кнопки просто 500x500px ДИВ, охватывающая весь слайд - так что вы можете щелкнуть в любом месте на ней, чтобы получить к следующему слайду.

Однако на некоторых слайдах мне также нужны текстовые ссылки. По аналогичным проблемам с «зарытыми ссылками» за элементами наложения я видел решения с использованием pointer-events:none на верхнем слое. Это позволяет мне щелкнуть ссылку ниже, однако она также удаляет ссылку из верхнего слоя. Я также пробовал играть с z-index и position, но почему-то мне не удавалось принести только ссылку на поверхность, не подвергая риску ссылку, покрывающую остальную часть слайда.

Я предполагаю, что пример того, что я ищу, - это то, как Twitter обрабатывает внешние ссылки в своих твитах - вы можете щелкнуть по самому твиту (расширяя его), но также и по ссылке внутри него.

Как я могу щелкнуть ссылку по ссылке?

Answer 1

Вам не нужно использовать специальный DIV для выполнения «следующего события слайда», вы можете использовать событие щелчка контейнера. Как это:

Сценарий:

$(document).ready(function(){ 
       $('#container').click(function(){ 
        // Call your next slide. 
        window.redirect = 'http://www.microsoft.com'; 
       }); 
       $('#container a').click(function(e){ 
        e.stopPropagation(); 
        return true; 
       }); 
      }); 

HTML пример:

<div style="width: 500px; height: 500px; background-color: #f1f1f1" id="container"> 
      <!-- Here goes your div content --> 
      Some text bla bla bla <a href="#">link</a><br><br> 
      Some text bla bla bla <a href="#">link</a><br><br> 
      Some text bla bla bla <a href="#">link</a><br><br> 
     </div> 

Смотрите, если это решить вашу проблему.