Как запретить переход по ссылке | CSS/JavaScript

Для того, чтобы нельзя было переходить по ссылке, она не была кликабельна (см. поддержка pointer-events браузерами):

Я ссылка, по мне не перейти

<a href="http://shpargalkablog.ru/" class="noLink">Я ссылка, по мне не перейти</a>

После чего она становится недоступна и для события onclick:

Я ссылка, по мне не перейти
<a href="http://shpargalkablog.ru/" class="noLink" onclick="alert('Скрипт сработал')">Я ссылка, по мне не перейти</a>

То есть похожа на disabled

<input type="submit" value="Отправить" onclick="alert('Скрипт сработал')" disabled>

Запрет перехода по ссылке в JavaScript

Можно так: Я ссылка, по мне не перейти, но я покажу сообщение

<a href="http://shpargalkablog.ru/" id="noLink1">Я ссылка, по мне не перейти, но я покажу сообщение</a>
<script>
document.getElementById('noLink1').addEventListener('click', function(e) {
   e.preventDefault();
   alert('Скрипт сработал');
}, false);
</script>

И так: Я ссылка, по мне не перейти, но я покажу сообщение

<a href="http://shpargalkablog.ru/" onclick="raz(event);">Я ссылка, по мне не перейти, но я покажу сообщение</a>
<script>
function raz(e) {
  e.preventDefault();
  alert('Скрипт сработал');
};
</script>

И так: Я ссылка, по мне не перейти, но я покажу сообщение

<a href="http://shpargalkablog.ru/" id="noLink2">Я ссылка, по мне не перейти, но я покажу сообщение</a>
<script>
document.getElementById('noLink2').onclick = function(){
   alert('Скрипт сработал');
   return false; // подробнее про return false;
};
</script>

И так: Я ссылка, по мне не перейти, но я покажу сообщение

<a href="http://shpargalkablog.ru/" onclick="raz1(); return false;">Я ссылка, по мне не перейти, но я покажу сообщение</a>
<script>
function raz1() {
   alert('Скрипт сработал');
};
</script>

Но не так: Я ссылка, по мне можно перейти, но перед этим я покажу сообщение

<a href="http://shpargalkablog.ru/" onclick="raz2();">Я ссылка, по мне можно перейти, но перед этим я покажу сообщение</a>
<script>
function raz2() {
   alert('Скрипт сработал');
   return false;
};
</script>

Но не так: Я ссылка, по мне можно перейти

<a href="http://shpargalkablog.ru/" id="noLink3">Я ссылка, по мне можно перейти</a>
<script>
document.getElementById('noLink3').addEventListener('click', function(e) {
   return false;
   alert('Скрипт сработал');
}, false);
</script>
в f t
наверх ↑

7 комментариев:

Анонимный
Подскажите пожалуйста, возможно ли создать родительскую страницу с опциями управления контентом с помощью Джава скрипт?
NMitra
Два URL связываются либо iframe, либо php
В короне
спасибо! фишка пригодилась!
Анонимный
Подскажите как закрепить ссылку ,так чтобы ее могли открывать из всех социальных сетей http://money-birgs.es/?i=291542
NMitra
Вопрос не поняла: где закрепить ссылку? Можно сделать так, что если нажать на ссылку, то можно поделиться ей в соц сетях http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html
Unknown
return false; пишете перед вызовом функции. Так как сначала отработает функция и перейдет по ссылке
NMitra
Что-то у меня не получается

<a href="http://shpargalkablog.ru/" onclick="return false; raz1();">Я ссылка, по мне не перейти, я не покажу сообщение</a>
<script>
function raz1() {
alert('Скрипт сработал');
};
</script>