PreventDefault () в теге <a>
У меня есть HTML и jQuery, которые перемещают div вверх и вниз, чтобы показать или скрыть его при нажатии ссылки:
<ul class = "product-info">
<li>
<a href = "#">YOU CLICK THIS TO SHOW/HIDE</a>
<div class = "toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
Мой вопрос: как мне использовать preventDefault(), чтобы ссылка не действовала как ссылка, добавляла «#» в конец моего URL-адреса и переходила наверх страницы?
Я не могу понять правильный синтаксис, я просто получаю сообщение об ошибке
preventDefault() is not a function.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
Попробуйте что-нибудь вроде:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Вот страница об этом в документация jQuery
В качестве альтернативы вы можете просто вернуть false из события щелчка:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
Что остановило бы запуск A-Href.
Обратите внимание, однако, из соображений удобства использования, в идеальном мире href все равно должен куда-то идти, для людей, которые хотят открывать ссылку в новой вкладке;)
Как бы то ни было, много лет назад было рекламировано, что вы должны вернуть -1, чтобы предотвратить срабатывание href. Я не думаю, что это больше работает в ЛЮБЫХ браузерах, и вы должны «вернуть false», чтобы предотвратить скачки страницы.
Почему бы просто не сделать это в CSS?
Уберите атрибут href из тега привязки.
<ul class = "product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class = "toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
В вашем CSS
a{
cursor: pointer;
}
Таким образом вы потеряете атрибут: hover в плохих браузерах (то есть в семействе).
Если остановка распространения события вас не беспокоит, просто используйте
return false;
в конце вашего обработчика. В jQuery он предотвращает поведение по умолчанию и останавливает всплытие событий.
Предлагается не использовать return false, поскольку в результате возникают 3 вещи:
- event.preventDefault ();
- event.stopPropagation ();
- Останавливает выполнение обратного вызова и немедленно возвращается при вызове.
Так что в такой ситуации вам действительно следует использовать только event.preventDefault();.
Архив статьи - События jQuery: прекратить (неправильно) использовать return False
Я только что протестировал это решение, отличное от JQuery, и оно работает.
<html lang = "en">
<head>
<script type = "text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li><a href = "http://www.google.com">Google</a></li>
<li><a href = "http://www.facebook.com">Facebook</a></li>
<p id = "p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
Установите атрибут href как href = "javascript:;"
<ul class = "product-info">
<li>
<a href = "javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
<div class = "toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Хорошая жемчужина для якорей - спасибо! Может ли кто-нибудь описать, почему это работает?
Атрибут @KLVTZ href тега привязки (a) может быть не пустым ... Но мы можем установить его на javascript:<code-here>, это допустимо. Затем мы вводим для <code-here> просто пустой оператор, добавляя точку с запятой. Таким образом ссылка ничего не делает.
Большое спасибо! Это позволило мне реализовать функцию кнопки возврата (запоминание состояния, установленного pushState () на страницах) в хлебные крошки CalePHP, например $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');
<ul class = "product-info">
<li>
<a href = "javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
<div class = "toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Использовать
javascript:void(0);
@AhmadSharif Я тестировал сегодня FF 40.0.3 и IE 11, есть еще работа.
Я думаю, что void (0) может быть уродливым / запутанным для пользователей, которые могут видеть это, когда они наводят ссылку. Фактически вы можете поместить любой действительный JS, поэтому я хотел бы добавить комментарий, описывающий, что он делает. например href = "javascript:// Send Email"
После нескольких операций, когда страница должна наконец перейти по ссылке <a href"...">, вы можете сделать следующее:
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});
Зачем делать preventDefault, а потом делать действия по умолчанию самостоятельно? Просто сделайте то, что вам нужно добавить, и пусть значение по умолчанию останется в силе.
Вы можете использовать return false; из вызова события, чтобы остановить распространение события, он действует как event.preventDefault();, отменяя его. Или вы можете использовать javascript:void(0) в атрибуте href, чтобы оценить данное выражение, а затем вернуть undefined элементу.
Возврат события при его вызове:
<a href = "" onclick = "return false;"> ... </a>
Пустой случай:
<a href = "javascript:void(0);"> ... </a>
Вы можете узнать больше о: Каков эффект добавления void (0) для href и return false в прослушиватель событий щелчка тега привязки?
1 - Простой способ:
<a href = "javascript:;">Click Me</a>
2 - с использованием void (0):
<a href = "javascript:void(0);">Click Me</a>
3 - Использование preventDefault():
<a href='#' onclick = "event.preventDefault()">Click Me</a>
4 - Еще один способ сделать это в Javascript с использованием inline onclick, IIFE, event и preventDefault():
<a href='#' onclick = "(function(e){e.preventDefault();})(event)">Click Me</a>
Привет или просто <a href='#' onclick = "event.preventDefault()">Click Me</a>
@ankabot ага. Я считаю, что это есть в некоторых других ответах. Я просто хотел добавить ответ другим способом, о котором не упоминалось. Также, чтобы показать другой способ работы с Javascript. (есть неограниченное количество способов делать что-то в JS!). Основные ответы легче читать и практичнее. Это просто теория, а не практика :)
да, я думаю, что отвечал на то, что я думал о твоих намерениях, а не на вопрос :)