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

93

Я хочу создать тег привязки, который выполняет некоторый 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 jquery html anchor психотик
источник
return true;это решение, но вы также можете позвонить location.hash = '#Foo'. Это не будет перезагружать страницу.
shuangwhywhy 01

Ответы:

134

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

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

Янтарь
источник
1
Что делать, если onclick ничего не возвращает?
maciek
1
@maciek, то возвращаемое значение undefinedсчитается ложным для этих целей.
Эмбер
1
Раньше всякий раз, когда я использовал функцию js для запуска новой страницы и ставил только «#» для атрибута href, я возвращал «-1», чтобы предотвратить действие по умолчанию, которым обычно является прыжок браузера. в начало страницы, а иногда я просто ничего не возвращал. В последнее время мне пришлось пересмотреть все эти страницы, как советовал @Amber ... специально возвращать false, если я не хочу, чтобы страница прыгала.
Рэнди,
1
@Amber кажется, что если onclick ничего не возвращает, будет обработано присущее ссылке действие clicked.
iplus26
Также вы не должны использовать event.preventDefault () в обработчике событий щелчка.
Рубен
36 
<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

а также

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

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

n1313
источник
1
Кажется, не работает, если ваша функция возвращает true после отложенного вызова функции?
DavidVdd 03
7

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

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

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

Пейрикс
источник
0

При создании чистой 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>
Развернуть фрагмент

Карл Джеймс Омандам
источник