В настоящее время я использую теги <a> с jQuery, чтобы инициировать такие события, как события click и т.д.
Пример <a href="#" class="someclass">Text</a>
Но я ненавижу, как "#" переводит страницу в начало страницы. Что я могу сделать вместо этого?
В jQuery, когда вы обрабатываете событие click, return false, чтобы остановить ссылку от обычного способа, предотвратить действие по умолчанию, которое должно посещать атрибут href, проходить ( за комментарий PoweRoy и Ответ Эрика):
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});
Итак, это старый, но... на всякий случай кто-то находит это в поиске.
Просто используйте "#/" вместо "#", и страница не будет прыгать.
вы можете даже написать его так:
<a href="javascript:void(0);"></a>
im не уверен, что это лучший способ, но это способ:)
<a href="#!" class="someclass">Text</a>
javascript)<a href="javascript:void(0);" class="someclass">Text</a>
jQuery)<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>
Вы можете использовать event.preventDefault(), чтобы избежать этого. Подробнее здесь: http://api.jquery.com/event.preventDefault/.
Просто используйте <input type="button" /> вместо <a> и используйте CSS, чтобы он выглядел как ссылка, если хотите.
Кнопки создаются специально для щелчка, и им не нужны атрибуты href.
Лучший способ - использовать onload-действие для создания кнопки и добавить ее туда, где вам нужно с помощью javascript, поэтому с отключенным javascript они вообще не будут отображаться и не путать пользователя.
Когда вы используете href="#", вы получаете множество разных ссылок, указывающих на одно и то же место, которое не будет работать, если агент не поддерживает JavaScript.
Если вы хотите использовать якорь, вы можете использовать http://api.jquery.com/event.preventDefault/, как и другие предложенные ответы.
Вы также можете использовать любой другой элемент, например span, и присоединить к нему событие click.
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
Вы можете использовать #0 как href, так как 0 не разрешен как id, страница не будет прыгать.
<a href="#0" class="someclass">Text</a>
Если элемент не имеет значимого значения href, то это не действительно ссылка, поэтому почему бы не использовать какой-либо другой элемент вместо этого?
Как было предложено Neothor, пролет как можно более подходящий, и, если его правильно сформулировать, он будет явно очевиден как элемент, на который можно щелкнуть. Вы даже можете прикрепить событие зависания, чтобы заставить элемент "загораться", когда пользовательская мышь перемещается над ним.
Однако, сказав это, вы можете захотеть переосмыслить дизайн своего сайта, чтобы он функционировал без javascript, но был расширен javascript, когда он доступен.
Просто используйте
<a href="javascript:;" class="someclass">Text</a>
JQUERY
$('.someclass').click(function(e) { alert("action here"); }
Связи с href= "#" должны почти всегда быть заменены на элемент кнопки:
<button class="someclass">Text</button>
Использование ссылок с href= "#" также является проблемой доступности, поскольку эти ссылки будут видны читателям экрана, в которых будет указано "Ссылка - Текст", но если пользователь нажимает, он никуда не денется.
$('a[href="#"]').click(function(e) {e.preventDefault(); });
Вы можете просто передать тег привязки без свойства href и использовать jQuery для выполнения требуемого действия:
<a class="foo">bar</a>
Я использовал:
<a href="javascript://nop/" class="someClass">Text</a>
Если вы хотите перейти на раздел привязки на той же странице без перескакивания страницы, используйте:
Просто используйте "#/" вместо "#" например,
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..
Я всегда использовал:
<a href="#?">Some text</a>
при попытке предотвратить переключение страницы. Не уверен, что это самое лучшее, но, похоже, оно работает уже много лет.
Вы также можете вернуть значение false после обработки jquery.
Eg.
$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);
Я использую что-то вроде этого:
<a href="#null" class="someclass">Text</a>
Чтобы предотвратить перескакивание страницы, вам необходимо вызвать e.stopPropagation(); после вызова e.preventDefault();:
stopPropagation не позволяет событию перейти в дерево DOM. Подробнее здесь: https://api.jquery.com/event.stoppropagation/
Тройка #/ работает, но добавляет событие истории в браузер. Таким образом, щелчок назад не работает, так как пользователь может захотеть/ожидать его.
$('body').click('a[href="#"]', function(e) {e.preventDefault() }); - это то, как я пошел, поскольку он работает для уже существующего контента, и любые элементы, добавленные в DOM после загрузки.
В частности, мне нужно было сделать это в выпадающем меню начальной загрузки внутри .btn-group (Reference), поэтому я сделал:
$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });
Таким образом, он был нацелен и не влиял ни на что другое на странице.
Добавление чего-либо после # устанавливает фокус страницы на элемент с этим идентификатором. Самое простое решение - использовать #/ даже если вы используете jQuery. Однако, если вы обрабатываете событие в jQuery, event.preventDefault() - это путь.
Существует 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.
<a href="#!">Link</a> и <a href="#/">Link</a> не работает, если нужно нажать на один и тот же вход более одного раза. в 1 событии нажмите для каждого на нескольких входах.
<a href="#">Link</a> менее, лучший способ - использовать <a href="#">Link</a>
затем,
event.preventDefault();