Добавление кнопок внутри тега <a>

Question

Итак, в основном у меня есть список элементов, которые выглядят так:

Я хочу, чтобы весь div был ссылкой на другую страницу и имел две кнопки на сторона делает некоторые вещи javascript. Html не позволяет использовать вложенные интерактивные элементы. Кнопки и другие вещи не работают внутри тега <a> и наоборот. Кто-нибудь может дать мне несколько идей о том, как этого добиться?

Answer 1

Вот один из способов добиться этого, а именно:

<div onclick="location.href='index.html'"></div>

Answer 2

Вы также можете сделать это. У вас есть ссылка внутри div, на которую вы ссылаетесь, дайте ей псевдоэлемент с абсолютным положением, чтобы он охватывал весь элемент, и теперь вы даете своим кнопкам z-индекс 1, и они находятся над этим псевдоэлементом, это также применимо к другим ссылкам внутри, без остановки распространения.

const button = document.querySelector('.js-console-log')
button.addEventListener('click', () => {
  alert('I dont trigger the link')
})

.header {
  position: relative;
  padding: 3rem;
  border: 1px solid deepskyblue;
}

.header__link {
  font-size: 2rem;
}

.header__link::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  padding: 1rem;
  background-color: aqua;
  border: none;
  z-index: 1;
}

<div class="header">
  <a href="#0" class="header__link">Link to this awesome place...</a>

  <button class="button js-console-log">I'll do something</button>
</div>