href = "#" добавляет # в конце URL страницы

Question

Допустим, у меня есть следующая ссылка:

<a href="#" onclick="alert('You clicked a link.');">Click Me!</a>

При нажатии на эту ссылку будет выводиться сообщение, а также добавляется знак фунта в конце URL-адреса страницы.Это выглядит не очень красиво, есть ли способ избежать этого, кроме использования javascript в самом URL:

<a href="javascript:alert('You clicked a link.');">Click Me!</a>

Answer 1

Вы должны предотвратить ответ по умолчанию.

Старомодный подход к return false из него:

<a href="#" onclick="alert('You clicked a link.'); return false;">Click Me!</a>

Или лучше:

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      return false;
   };
};
</script>

На сегодняшний день лучший подход - это вызвать правильный метод свойства event:

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      event.preventDefault(); // <---
   };
};
</script>

Также лучше заменить этот # на URI для какой-то подходящей страницы, для людей, не использующих JavaScript. В некоторых юрисдикциях доступность на самом деле является юридическим требованием .

Редактировать Исправлено для кровотечения IE:

function f() {
   document.getElementById('myLink').onclick = function(e) {
      alert('You clicked a link.');

    if (!e) {
       var e = window.event;
    }

    // e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue  = false;

    // e.stopPropagation works only in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
};

window.onload = f;

Answer 2

Хитрость return false в обработчике событий.

<a href="" onclick="alert('You clicked a link.'); return false">Click Me!</a>