preventDefault () в теге <a>

133

У меня есть 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 () не является функцией.

javascript jquery Крис Дж Аллен
источник

Ответы:

194

Попробуйте что-то вроде:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Вот страница об этом в документации jQuery

Давиде Гуалано
источник
53

Установите 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>
Мусаддик Хан
источник
Хорошая жемчужина для якорей - спасибо! Может ли кто-нибудь описать, почему это работает?
justinpage
8
Атрибут @KLVTZ hrefтега привязки ( a) не может быть пустым ... Но мы можем установить его в значение javascript:<code-here>, это допустимо. Затем мы вводим <code-here>просто пустой оператор, добавляя точку с запятой. Таким образом, ссылка ничего не делает.
Stijn de Witt
1
Большое спасибо! Это позволило мне реализовать функциональность кнопки возврата (запоминание состояния, установленного pushState () на страницах) в хлебные крошки CalePHP, например $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); «);
Patronaut
38

Рекомендуется не использовать return false, поскольку в результате возникают 3 вещи:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Останавливает выполнение обратного вызова и немедленно возвращается при вызове.

Поэтому в такой ситуации вам действительно следует использовать только event.preventDefault();

Архив статьи - События jQuery: прекратить (неправильно) использовать return False

Райан
источник
13

В качестве альтернативы вы можете просто вернуть false из события щелчка: 

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

Что остановило бы запуск A-Href.

Обратите внимание, однако, из соображений удобства использования, в идеальном мире href все равно должен куда-то идти, для людей, которые хотят открывать ссылку в новой вкладке;)

Кент Фредрик
источник
1
да, я думаю, что отвечал на то, что, как я думал, было вашим намерением, а не на вопрос :)
Кент Фредрик
Как бы то ни было, много лет назад было рекламировано, что вы должны вернуть -1, чтобы предотвратить запуск href. Я не думаю, что это больше работает в ЛЮБЫХ браузерах, и вы должны «вернуть false», чтобы предотвратить скачки страницы.
Randy
12

Я только что протестировал это решение, отличное от 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>
Джефри Булла
источник
12 
<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: недействительным (0);

HATCHA
источник
@AhmadSharif Сегодня я тестировал на FF 40.0.3 и IE 11, есть работы.
HATCHA
1
Я думаю, что void (0) может быть некрасивым / запутанным для пользователей, которые могут видеть это, когда они наводят ссылку. На самом деле вы можете поместить любой действительный JS, поэтому я хотел бы добавить комментарий, описывающий, что он делает. eghref="javascript:// Send Email"
colllin
11

Еще один способ сделать это в JavaScript , используя inline onclick, IIFE, eventи preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
A-Sharabiani
источник
Привет, или просто<a href='#' onclick="event.preventDefault()">Click Me</a>
анкабот
6

после нескольких операций, когда страница должна наконец перейти по ссылке, вы можете сделать следующее:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });
1nstinct
источник
1
Зачем делать preventDefault, а затем выполнять действие по умолчанию самостоятельно? Просто сделайте то, что вам нужно добавить, и пусть значение по умолчанию останется в силе.
nathanvda
5

Почему бы просто не сделать это в 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;
    }

источник
1
В этом случае атрибут: hover в плохих браузерах (то есть в семействе)
потеряется
4

Если остановка распространения события вас не беспокоит, просто используйте 

return false;

в конце вашего обработчика. В jQuery он предотвращает поведение по умолчанию и останавливает всплытие событий.

sebarmeli
источник
4

Вы можете использовать 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' в прослушиватель событий щелчка тега привязки?

RPichioli
источник