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

Question

[Елена]

<style>
	.a {
		display: block;
		width: 200px;
		height: 200px;
		background-color: #fff;
		position: relative;
	}
  .b {
		display: block;
    width: 50px;
		height: 50px;
    background-color: rgb(136, 170, 199);
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>

<a href="http://yandex.ru" class="a">
	<button class="b">Es</button>
</a>

Вопрос в заголовке) Кнопку нельзя убрать из ссылки

Comments

[Rerurk]

Прикалываетесь?

[Елена]

Rerurk, почему?

[Rerurk]

Elena0394, приколист наверное, поэтому

[Елена]

Rerurk, нет, не прикол это

[Alex]

Было бы очень кстати, если бы вы описали задачу, которую пытаетесь решить засовывая кнопку в ссылку. А то выглядит как попытка забить гвоздь микроскопом.

[Елена]

Alex, есть карточка, при клики на нее, открывается полная ее версия, и у этой карточки есть лайк. Так вот когда я лайк ставлю, у меня открывается полная карточка и ставится лайк, а мне нужно только лайк

[Alex]

Elena0394, Вот так и нужно было сформировать вопрос: Что имеете, что хотите сделать, что пробовали и с какой проблемой столкнулись. Иначе вы не получите ответа

Answer 1

[Никита Михайлов]

Тут не надо придумывать что-то. Кнопка внутри ссылки, соответственно любым образом наводя на кнопку мы попадаем на ссылку. Лучше не мучиться и вынести их за пределы друг друга.

Answer 2

[Alex]

Alex, есть карточка, при клики на нее, открывается полная ее версия, и у этой карточки есть лайк. Так вот когда я лайк ставлю, у меня открывается полная карточка и ставится лайк, а мне нужно только лайк

В обработчике клика по кнопке лайк, нужно добавить вызов stopPropagation

Comments

[Елена]

Да именно это искала. Прям как мысли прочитал))

[Alex]

Elena0394, Вдогонку: делать карточку ссылкой весьма .... проблемно. Очень много нюансов, которые нужно учитывать (как вот с кликами), чтобы такой интерфейс был работоспособным и доступным. И вопросы по поводу поисковой индексации тоже есть ...

Answer 3

[ChecheVika]

href="#" поставить заглушку

Comments

[Елена]

Viktoria так мне ссылка то нужна)

Answer 4

[artuh_a]

.b {
    pointer-events: none;
}

Comments

[Елена]

artuh_a так кнопка нужна тоже)

[Pashok Doom]

Elena0394,

.a {
    pointer-events: none;
}
.b {
    pointer-events: all;
}

[Елена]

Pashok Doom, нужно, чтоб кликая на ссылку, то открывалась ссылка, а если кликнуть на кнопку, то ссылка не открывалась