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

151

09 ноября 2021, 03:40

Есть ссылка, и внутри ссылки текст. Как сделать так, чтобы при клике на спан ссылка не открывалась, а выполнялась JS-функция?

<a href="http://site.com/">Текст <span>текст</span> текст</a>

Answer 1

В jQuery:

$('.nolink').on('click', function(){ 
  /* 
    Тут уже можете писать что хотите.. 
  */ 
  console.info('Чё? Не открывается?'); 
   
  return false; // это отменит переход по ссылке. 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a class="nolink" href="https://blablabla.bla/">Нажми</a>

Отменить при нажатии на span.

Учитывайте, что у ссылки <a> должен быть свой таргет, чтобы можно было нажать и на <span> и на <a>

$('.nolink > span').on('click', function(){ 
  /* 
    Тут уже можете писать что хотите.. 
  */ 
  console.info('Чё? Не открывается?'); 
   
  return false; // это отменит переход по ссылке. 
});

.nolink { 
  display: inline-block; 
  padding: 10px; 
  background: green; 
} 
 
.nolink span { 
  display: inline-block; 
  padding: 5px; 
  background: blue; 
  color: #fff; 
} 
 
.nolink:hover, 
.nolink span:hover { 
  background: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<a class="nolink" href="https://blablabla.bla/"><span>Нажми</span></a>