Как правильно изменить поведение тега <a>?

Question

Я хочу, чтобы ссылка вызывала функцию Javascript через событие onclick и больше ничего не делала (перейдите по ссылке). Каков наилучший способ сделать это? Я обычно делаю это:

<a href="#" onclick="foo()">Click</a>

Но я не уверен, что это лучший способ, и в этом случае он переходит на page.html #, что не подходит для того, что я делаю.

Answer 1

Обычно у вас всегда должна быть запасная ссылка, чтобы убедиться, что клиенты с отключенным JavaScript все еще имеют некоторые функции. Эта концепция называется ненавязчивым JavaScript. Пример ... Допустим, у вас есть следующая поисковая ссылка:

<a href="search.php" id="searchLink">Search</a>

Вы всегда можете сделать следующее:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Таким образом, люди с отключенным javascript направляются на search.php, в то время как ваши зрители с JavaScript видят вашу расширенную функциональность.

Редактировать: Как указано в комментарии № 2 nickf , попытка и отлов не позволят перейти по ссылке, если в вашем обработчике будет ошибка.

Answer 2

Просто убедитесь, что вернули false из вашего обработчика onclick. Например. foo() должно быть определено как:

function foo() {
  // ... do stuff
  return false;
}

Кто-то указал в комментариях, что вам может потребоваться немного изменить HTML, чтобы это работало:

<a href="#" onclick="return foo()">Click</a>

Или просто поместите это в HTML:

<a href="#" onclick="foo(); return false;">Click</a>

Answer 3

Во-первых, есть два способа настроить href - вы можете сделать, как вы сказали выше, с href, ссылающимся на '#', или вы можете установить href для ссылки "javascript:;"

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

window.onload = {
    var myLink = document.getElementById('myLinkID');
    myLink.onclick = function(evt) {
        var evt = (evt) ? evt : ((event) ? event : null); // for cross-browser issues
        evt.preventDefault();
        evt.stopPropagation();
        foo();
    }
}

Answer 4

Проблема с href="#" заключается в том, что браузер переместится в верхнюю часть страницы. Вы можете сделать:

<a href="javascript:foo()">clicky</a>

Хотя все больше людей рекомендуют не делать этого (разделение слоев). Лучший способ, используя Prototype (так же просто, как в JQuery и др.):

<a id="foo" href="#">clicky</a>

$('foo').observe('click', function(evt) { 
  foo();
  evt.stop(); // keeps it from navigating to the href url
}); 

Answer 5

Осторожно, просто используя

<a href="#">Click</a>

, поскольку это может вызвать неприятную IE6 проблему .

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

<a href="#MAGIC">Click</a>

потому что это заставляет меня смеяться.

Answer 6

Большая путаница возникает из-за использования a-тэгов, потому что они поддерживают разные браузеры: псевдо-css-селектор hover ...

Поэтому часто очевидно использование a-тега, поскольку он будет отображаться по-разному в зависимости от различных этапов наведения мыши ...

Некоторые утверждают, что функциональность, встроенная в псевдотег: hover, вообще не должна быть доступна, поскольку намерение W3C состоит в том, чтобы разделить контент, визуальное представление и функциональность на три части динамического HTML; HTML, CSS и JavaScript.

Но пока мы застряли с этим, и на данный момент функционально можно использовать a-тэги разными способами, поскольку они выполняют задачи простым способом, и это кросс-браузер с прямым доступом ! -)

Но это означает, что вам иногда приходится отключать поведение этих тегов ссылок по умолчанию, а это означает, что вы должны сделать так, чтобы событие onclick возвращало значение false, если нет смысла изменять содержимое текущего документ ...

Однако можно привести очень хорошие примеры использования отклонения поведения по умолчанию, например, можно предоставить всплывающее окно с определенными свойствами, даже если пользователь отключил использование javascript:

<a href="http://en.wikipedia.org/wiki/Css" target="_blank" onclick="window.open(this.href,'_blank','width=600,height=450,status=no');return false;">Show wikipedia css</a>

Answer 7

Установите атрибут href для выполнения JavaScript. Как это:

<a href="javascript:foo()">Click</a>

Таким образом, все ваши стили CSS: hover работают как положено.

Answer 8

Если вы включите

return false;

из события onclick, тогда страница вообще не будет загружаться. Например:

<a href="#" onclick="foo();return false;">Click</a>

Или в самой функции:

function foo() {
  // other stuff
  return false;
}

Answer 9

вернуть false после вызова foo ()

Answer 10

<a href="javascript: foo()" >Click</a>