PreventDefault() в теге

У меня есть некоторые 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.

Ответ 1

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

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

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

Ответ 2

Установите атрибут 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>

Ответ 3

Предполагается, что вы не используете return false, так как в результате происходит 3 вещи:

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

Так что в такой ситуации вы должны использовать только event.preventDefault();

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

Ответ 4

<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);

Ответ 5

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

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

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

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

Ответ 6

Это решение, отличное от 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>

Ответ 7

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

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

Ответ 8

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

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

            window.location = href;
          });

Ответ 9

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

Ответ 10

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

return false;

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

Ответ 11

Вы можете использовать return false; из вызова события, чтобы остановить распространение события, он действует как event.preventDefault();, отрицая его. Или вы можете использовать javascript:void(0) в атрибуте href для вычисления данного выражения и затем вернуть undefined к элементу.

Возврат события при его вызове:

<a href="" onclick="return false;"> ... </a>

Случай с Void:

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

Вы можете увидеть больше в: Каков эффект добавления void (0) для href и "return false" при прослушивании событий события привязки тега привязки?