HTML ссылка-картинка, прямо на ней еще и кнопка. Как сделать чтобы при нажатии на кнопку не срабатывала ссылка?

Question

Есть такой код:

<a href="https://sample.photohost/398821.jpg">
  <img src="https://sample.photohost/398821.jpg" width="200">
  <button type="button" onclick="copyLink()"> Copy link </button>
</a>

CSS'ом кнопка поставлена поверх картинки.

При нажатии на кнопку срабатывает кнопка и еще и открывается картинка.

Как сделать чтобы картинка открывалась по картинке, а по кнопке не открывалась?

Answer 1

.wrap {
 width: 200px;
  height: 200px;
  position: relative;
  z-index: 1;
}

a{
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

a img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
button {
  position: absolute;
  bottom: 50px;
  z-index: 1;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px
}

<div class="wrap">
  <a href="https://sample.photohost/398821.jpg">
      <img src="https://sample.photohost/398821.jpg">
  </a>
  <button type="button" onclick="copyLink()"> Copy link </button>
</div>

БЛОГ НА HUSL

HTML ссылка-картинка, прямо на ней еще и кнопка. Как сделать чтобы при нажатии на кнопку не срабатывала ссылка?

Ответы (1 шт):