Как сделать всю карточку товаров целиком ссылкой

[hike]

Решение, скорее всего, очень простое. У меня есть карточка товара. Название товара и изображение я могу сделать ссылками. Но вот как сделать ссылкой всю карточку - не знаю. Ведь блочные элементы и другие ссылки нельзя вкладывать внутрь ссылки. Есть ли идеи, как это сделать?

[SelenIT]

Интерактивные элементы (в том числе другие ссылки) нельзя в ссылку вкладывать. Кроме этого в ссылку можно вкладывать всё, что можно вкладывать в ее родителя. «Блочностью и строчностью» в современном HTML лучше вообще не заморачиваться, не всё сводится к этому делению, и от него больше путаницы, чем пользы.

А что в карточке товара — другие ссылки?

 

[Switch74]

если внутри карточки есть другие ссылки, то я бы делал через обработчик click который бы проверял по какому элементу произошел клик, если это не интерактивный элемент типа ссылки, кнопки и т.п., то отрабатывать переход по карточке

[hike]

Вот что представляет из себя карточка https://plnkr.co/edit/rEvO7fK4DhJ7zC8j41Y7?p=preview

Цитата

 я бы делал через обработчик click который бы проверял по какому элементу произошел клик

Как это сделать?

[Switch74]

ну что-нибудь вроде
 

<div class="click" data-url="https://jsfiddle.net/">
  <span>next</span>
  <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png">
  <a href="#">link</a><button>button</button>
</div>
<script>
$(function()
{
    $('.click').on('click',function(e)
  {
      if(e.target.tagName == 'A') return true;
    else if(e.target.tagName == 'BUTTON') return true;
    else
    {
        window.location.href = $(e.currentTarget).attr('data-url');
    }
    return false;
  });
});
</script>

что-то не получилось у меня в jsfidle сохранить

[SelenIT]

Верно ли я понимаю, что всё, кроме кнопки «Add to cart», ведет на отдельную страницу товара, и только кнопка выполняет специальное действие?