jQuery гиперссылки - значение href? - PullRequest
Новая
       50

jQuery гиперссылки - значение href?

45 голосов
/ 06 апреля 2009

На моем веб-сайте я использую jQuery для перехвата событий элементов, а именно гиперссылок. Поскольку эти гиперссылки выполняют только действия на текущей странице и никуда не ведут, я поместил атрибут href "#" в: 

<a href="#">My Link</a>

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

Что мне туда положить?

Ответы [ 12 ]

51 голосов
/ 06 апреля 2009 
$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

Затем вы можете добавить в каждый href все, что захотите, и jQuery вызовет метод preventDefault(), и вы не будете перенаправлены на это место.

39 голосов
/ 27 января 2010

Те «якоря», которые существуют исключительно для предоставления события щелчка, но на самом деле не ссылаются на другой контент, должны действительно быть button элементами, потому что это то, чем они действительно являются.

Это можно оформить так: 

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

И, конечно, события нажатия могут быть прикреплены к кнопкам, не беспокоясь о том, что браузер перепрыгивает наверх, и не добавляя посторонний javascript, такой как onclick = "return false;" или event.preventDefault ().

36 голосов
/ 06 апреля 2009

Вы должны действительно поставить реальную ссылку там. Я не хочу походить на педанта, но это довольно плохая привычка. JQuery и Ajax всегда должны быть последним, что вы реализуете. Если у вас есть ссылка, которая никуда не идет, вы делаете это неправильно.

Я не бью твои яйца, я имею в виду это из лучших побуждений.

11 голосов
/ 06 апреля 2009

Зачем использовать <a href>? Я решаю это так:

<span class='a'>fake link</span>

И стиль с:

.a {text-decoration:underline; cursor:pointer;}

Вы можете легко получить к нему доступ с помощью jQuery:

$(".a").click();

9 голосов
/ 06 апреля 2009

Добавьте return false в конец вашего обработчика кликов, это предотвращает появление обработчика браузера по умолчанию, который пытается перенаправить страницу: 

$('a').click(function() {
// do stuff
return false;
});
5 голосов
/ 20 июля 2009

используя jquery, вы можете захотеть получить только тех, у кого '#' 

$('a[href=#]').click(function(){return false;});

если вы используете новейший jquery (1.3.x), нет необходимости связывать его снова при изменении страницы: 

$('a[href=#]').live('click', function(){return false;});
4 голосов
/ 19 января 2010

вы должны использовать <a href="javascript:void(0)" ></a> вместо <a href="#" ></a>

3 голосов
/ 07 декабря 2011

Интересно, почему никто не сказал это здесь раньше: чтобы <a href="#"> не прокручивал позицию документа вверх, просто используйте <a href="#/"> вместо этого. Это просто HTML, JQuery не требуется. Использование event.preventDefault(); слишком много!

1 голос
/ 09 апреля 2010

Я знаю, что это старо, но ничего себе, такое простое решение.

полностью удалите "href" и просто добавьте класс, который выполняет следующее: 

.no-href { cursor:pointer: }

И это все!

0 голосов
/ 08 июля 2014

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

  1. Я думал У меня была эта проблема
  2. Но я использовал return false и javascript: void (0);
  3. Затем появилась четкая разница в проблеме:
  4. Я понял, что это не ВСЕ путь к вершине - и моя проблемная зона была в нижней части страницы, поэтому этот скачок был странным и раздражающим.
  5. Я понял, что использую fadeIn () [библиотека jQuery], которая в течение короткого времени отображала мой контент: нет
  6. А потом мой контент расширил охват страницы! Вызывает то, что выглядит как прыжок!
  7. Использование видимости скрытых переключателей теперь ..

Надеюсь, это поможет человеку, застрявшему в прыжках !!

Страница:
...