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

Question

[RuslanSerr]

Есть кнопка внутри которой span. И есть обработчик клика привязанный к .add-fav-btn.
Но если нажать в центр кнопки, т.е кликнуть по span то сработает обработчик событий привязанный к кнопке. Если этому span повесить обработчик c event.stopPropaganation, то при нажатии на span ничего не будет происходить.
В любом случае, при нажатии на кнопку и не важно на span ли было нажато или нет, нужно чтобы срабатывало событие именно у кнопки а не у span.
Что делать?

<button class="icon-btn add-fav-btn" type="button" data-product-id="2000" data-toggle="tooltip" data-original-title="В закладки">
  <span class="pe-7s-like"></span>
</button>
<script>
$(document).ready(function(){
	$('.add-fav-btn').on('click', function(e){
		let btn = e.target;
		let productId = btn.dataset.productId;
		console.log(btn);
		$.ajax(
			'/api.php',
			{
				data: {
					product_id: productId,
					action: 'add'
				},
				success: function(data) {
					let message = typeof(data.message) !== 'undefined' ? data.message : data.error_text;
					let alert = `
					<div class="alert alert-success"><i class="fa fa-check-circle"></i>
					${message}
					<button type="button" class="close" data-dismiss="alert"><span class="pe-7s-close"></span></button></div>
					`;

					$('.card').prepend(alert);
				}
			}
		);
	});
});
</script>

Answer 1

[v3shin]

let btn = this;