Как предотвратить щелчок по ссылке «#» от перехода к началу страницы?

Question

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

Пример является <a href="#" class="someclass">Text</a>

Но я ненавижу, как «#» делает страницы Перейти к началу страницы. Что я могу сделать вместо этого?

Answer 1

В JQuery, когда обрабатывать событие щелчка, вернуть ложь, чтобы остановить связь от ответа обычного способа предотвратить действие по умолчанию, который должен посетить атрибут href, принимать место (за комментарий PoweRoy и Erik's answer) :

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

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

Answer 2

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

Answer 3

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

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

им не уверен, что его лучший путь, но это путь :)

Answer 4

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

Jquery

$('.someclass').click(function(e) { alert("action here"); } 

Answer 8

Вы можете просто передать якорь тег без HREF собственности, и использовать JQuery, чтобы сделать необходимые действия:

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

Answer 9

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

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

Answer 10

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

Например.

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

Answer 11

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

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

Answer 12

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

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

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

Answer 13

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

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

Answer 14

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

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

Answer 15

Если вы хотите перейти к Anchor разделу на ту же страницу без страницы вскакивая использование:

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

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

Answer 16

$('a[href="#"]').click(function(e) {e.preventDefault(); }); 

Answer 17

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

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

Answer 18

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

Answer 19

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

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

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

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

Таким образом, он был направлен, и не влияет на что-нибудь вещь еще на странице.

Answer 20

Решение # 1:

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

Решение # 2:

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

Решение # 3:

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

Answer 21

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

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

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