Тег привязки HTML с событием onclick Javascript

86

При использовании Google я обнаружил, что они используют события onclick в тегах привязки.

В дополнительных параметрах в части заголовка Google он выглядит как обычный тег, но при его нажатии он не перенаправляется, а открывает меню. Обычно при использовании

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Обычно он переходит на 'more.php' без запуска show_more_menu(), но я показываю меню на самой странице. Как сделать лайк в гугле ?

— сообразительный ребенок
источник

117

Если ваша функция onclick возвращает false, поведение браузера по умолчанию отменяется. Как таковой:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

В любом случае, делает это Google или нет, не имеет большого значения. Будет проще привязать ваши функции onclick к javascript - таким образом вы отделите свой HTML от другого кода.

— TJHeuvel
источник

3

1. Чтобы быть более уверенным, используйте # в href = "#" и делайте необходимые вещи в javascript. На эту ссылку можно безопасно нажимать с # href; страница действительно оставляет / перезагружает URL.

— Bimal Poudel

4

С осторожностью следуйте приведенному выше совету, так как в правилах HTML5 явно указано, что href="#"предполагается, что он будет перемещаться в верхнюю часть страницы. Вы можете просто добавить hrefатрибут без содержимого и получить поведение щелчка. Назначение #URL- адреса для реальных страниц (вместо одностраничных приложений со 100% высотой), как правило, плохая идея.

— Майк 'Pomax' Камерманс

54

Вы даже можете попробовать вариант ниже:

<a href="javascript:show_more_menu();">More >>></a>

— солнце2
источник

1

Предупреждение: если функция возвращает какое-либо явное значение (например:, return null;но не return;), это приведет к непредвиденным последствиям в некоторых браузерах, таких как FireFox. Все содержимое страницы будет заменено возвращенным значением в строковом формате (например:) [object Object].

— rannmann 02

45

Насколько я понимаю, вы не хотите перенаправлять при нажатии на ссылку. Ты можешь сделать :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Адитья Манохар
источник

3

Это полезно, если вы не хотите, чтобы href никуда не указывал.

— kbpontius

Это круто и работает, но jquery выдает ошибку «Ошибка: синтаксическая ошибка, нераспознанное выражение: javascript :;»

— TheOddCoder

Я использую jQuery версии 1.10.2, и я не получаю синтаксической ошибки, с которой столкнулся @TheOddCoder.

— Майк Финч

1

Используйте следующий код, чтобы показать меню, вместо этого перейдите по адресу href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Развернуть фрагмент

— Камил Келчевски
источник