it-swarm.com.ru

Как предотвратить переход ссылки "#" на верх страницы?

В настоящее время я использую теги <a> с jQuery для запуска таких вещей, как события щелчка и т.д. 

Пример <a href="#" class="someclass">Text</a>

Но я ненавижу, как "#" заставляет страницу переходить наверх страницы. Что я могу сделать вместо этого?

178
st4ck0v3rfl0w

В jQuery, когда вы обрабатываете событие click, вернуть false, чтобы ссылка не отвечала обычным образом предотвратить действие по умолчанию, которое заключается в посещении атрибута href (согласно комментарию PoweRoy и ответу Эрика ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});
212
BoltClock

Так что это старо, но ... на тот случай, если кто-то найдет это в поиске.

Просто используйте "#/" вместо "#" и страница не перейдет.

264
Chris

вы даже можете написать это так:

<a href="javascript:void(0);"></a>

я не уверен, что это лучший способ, но это способ :)

57
guy schaller

Решение № 1: (простой)

<a href="#!" class="someclass">Text</a>

Решение № 2: (необходимо javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Решение № 3: (необходимо jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>
22
Nabi K.A.Z.

Вы можете использовать event.preventDefault(), чтобы избежать этого. Подробнее читайте здесь: http://api.jquery.com/event.preventDefault/ .

14
Erik Töyrä

Просто используйте <input type="button" /> вместо <a> и используйте CSS для стилизации, чтобы он выглядел как ссылка, если хотите.

Кнопки сделаны специально для нажатия, и им не нужны никакие атрибуты href.

Лучший способ - использовать действие onload для создания кнопки и добавления ее в нужное вам место через javascript, поэтому при отключенном javascript они вообще не будут отображаться и не будут вводить пользователя в заблуждение.

Когда вы используете href="#", вы получаете множество различных ссылок, указывающих на одно и то же местоположение, что не будет работать, если агент не поддерживает JavaScript.

10
takeshin

Если вы хотите использовать привязку, вы можете использовать http://api.jquery.com/event.preventDefault/ , как и другие предложенные ответы. 

Вы также можете использовать любой другой элемент, например, span, и прикрепить к нему событие click.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
8
Neothor

Вы можете использовать #0 в качестве href, поскольку 0 не разрешен в качестве идентификатора, страница не будет перемещаться.

<a href="#0" class="someclass">Text</a>
6
Veve

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

Как предполагает Neothor, интервал также подходит, и, если он правильно оформлен, он будет виден как элемент, по которому можно щелкнуть. Вы даже можете прикрепить событие hover, чтобы элемент «загорелся», когда мышь пользователя перемещается над ним.

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

4
belugabob

Просто используйте

<a href="javascript:;" class="someclass">Text</a>

JQUERY 

$('.someclass').click(function(e) { alert("action here"); }
4
Ayush
$('a[href="#"]').click(function(e) {e.preventDefault(); });
3
Praveen Manne

Вы можете просто передать тег привязки без свойства href и использовать jQuery для выполнения требуемого действия:

<a class="foo">bar</a>

2
kingjeffrey

Если вы хотите перейти в раздел «Якорь» на той же странице без перехода по страницам вверх, используйте:

Просто используйте «# /» вместо «#» например 

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..
2
Agidigbi Ayodeji Victor

Я использовал:

<a href="javascript://nop/" class="someClass">Text</a>
2
Brice Roncace

Я всегда использовал:

<a href="#?">Some text</a>

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

2
Josh Harris

Ссылки с href = "#" почти всегда должны заменяться элементом кнопки:

<button class="someclass">Text</button>

Использование ссылок с href = "#" также является проблемой доступности, так как эти ссылки будут видны программам чтения с экрана, которые будут считывать "Ссылка - текст", но если пользователь щелкнет, он никуда не денется.

2
martinedwards

Я использую что-то вроде этого:

<a href="#null" class="someclass">Text</a>
1
stefan

Трюк #/ работает, но добавляет событие истории в браузер. Таким образом, нажатие назад не работает, поскольку пользователь может захотеть/ожидать этого.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); - это мой путь, так как он работает с уже существующим контентом и любыми элементами, добавляемыми в DOM после загрузки.

В частности, мне нужно было сделать это в выпадающем меню начальной загрузки внутри .btn-group(Reference) , поэтому я сделал:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Таким образом, это было предназначено, и не затрагивало ничего больше на странице.

1
David

Чтобы предотвратить переход страницы, вам нужно вызвать e.stopPropagation(); после вызова e.preventDefault();:

stopPropagation не позволяет событию идти вверх по дереву DOM. Более подробная информация здесь: https://api.jquery.com/event.stoppropagation/

1
anthonyjruffa

Вы также можете вернуть false после обработки вашего jquery.

Например.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);
1
user3581326

Существует 4 аналогичных способа предотвратить переход страницы наверх без JavaScript:

Опция 1:

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

Вариант 2:

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

Вариант 3:

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

Вариант 4 ( Не рекомендуется ):

<a href="javascript:void(0);">Link</a>

Но лучше использовать event.preventDefault(), если вы передаете событие click в jQuery.

0
ExillustX

Добавление чего-либо после # устанавливает фокус страницы на элемент с этим идентификатором. Самое простое решение - использовать #/, даже если вы используете jQuery. Однако, если вы обрабатываете событие в jQuery, event.preventDefault() - это путь.

0
Vivek Vijayan