Якорная ссылка HTML - href и onclick оба?

Я хочу создать тег привязки, который выполняет некоторый JavaScript, а затем переходит туда, куда его взял href. Вызов функции, которая выполняет мой JavaScript, а затем устанавливает window.location или top.location в положение href, для меня не работает.

Итак, представьте, что у меня на странице есть элемент с идентификатором «Foo». Я хочу создать привязку, похожую на:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

При щелчке по нему я хочу выполнить runMyFunction, а затем перейти на страницу #Foo (не вызывать перезагрузки - использование top.location приведет к перезагрузке страницы).

Предложения? Я счастлив использовать jQuery, если он может здесь помочь ...


javascript html jquery anchor
person psychotik    schedule 28.08.2009    source источник
comment
return true; - это решение, но вы также можете вызвать location.hash = '#Foo'. Страница не будет перезагружена.   -  person shuangwhywhy    schedule 01.03.2017

Ответы (4)


arrow_upward
141
arrow_downward

Просто return true вместо этого?

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

person Amber    schedule 28.08.2009
comment
Что делать, если onclick ничего не возвращает? - person maciek; 05.05.2015
comment
@maciek, то возвращаемое значение рассматривается как undefined, что считается ложным для этих целей. - person Amber; 06.05.2015
comment
Раньше всякий раз, когда я использовал функцию js для запуска новой страницы и помещал только # для атрибута href, я возвращал -1, чтобы предотвратить действие по умолчанию, которое обычно представляет собой прыжок браузера к началу страницы. страницу, а иногда я просто ничего не возвращал. В последнее время мне пришлось пересмотреть все эти страницы, как советовал @Amber ... специально возвращать false, если я не хочу, чтобы страница прыгала. - person Randy; 12.08.2015
comment
@Amber кажется, что если onclick ничего не возвращает, будет обработано присущее ссылке действие clicked. - person iplus26; 22.12.2015
comment
Также вы не должны использовать event.preventDefault () в обработчике событий щелчка. - person Ruben; 08.07.2016
comment
@Ruben, не могли бы вы объяснить, почему вы не должны использовать event.preventDefault () в обработчике событий щелчка? - person David Maness; 14.01.2020

arrow_upward
40
arrow_downward 

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

а также

function runMyFunction() {
  //code
  return true;
}

Таким образом, ваша функция будет выполнена, И вы перейдете по ссылке, И вы перейдете по ссылке точно после того, как ваша функция будет успешно запущена.

person n1313    schedule 28.08.2009
comment
Кажется, не работает, если ваша функция возвращает true после отложенного вызова функции? - person DavidVdd; 03.02.2014

arrow_upward
7
arrow_downward

Если ссылка должна изменить местоположение только в случае успешного выполнения функции, тогда выполните onclick="return runMyFunction();", и в функции вы вернете истину или ложь.

Если вы просто хотите запустить функцию, а затем позволить тегу привязки выполнить свою работу, просто удалите оператор return false.

В качестве побочного примечания вам, вероятно, следует вместо этого использовать обработчик событий, поскольку встроенный JS не очень оптимальный способ делать что-то.

person peirix    schedule 28.08.2009

arrow_upward
0
arrow_downward

При создании чистой HTML-структуры вы можете использовать это.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;
<a href="#Foo" id="link_1">Do it!</a>

person Carl James Omandam    schedule 20.12.2019